$scope.$apply cannot update view for child directive when compile recursion prevented on parent

Question

I need some help with an app I am trying out. I am trying to modify the app found here https://github.com/mfauveau/angular-query-builder to a specific need.

A child directive isolated scope does not populate the view correctly/ child directive scopes are getting mixed because of parent directive recursion. I need help to solve the scope mixing.

The plunkr I am working on is here https://plnkr.co/edit/rqyHoCL5LHrgLHGjrTcQ?p=info

The directive in question is, this directive is visible on view when the "condition" field is of type "Education", and "find" button is visible.

queryBuilder.directive('categorySelector', function ($http){
return {
    restrict:'E',
    scope:{
        rule: '='
    },
    templateUrl: '/educationCategories.html',
    controller:['$scope', function ($scope){
        $scope.CategoryArray = [];
        $scope.populateCategories = function(){


            //async call here
            //sorry don't have an example $http call
            //but in my application
            //after the $http call the $scope.CategoryArray gets assigned 
            // the result but even $scope.$apply() doesnt update the view
            //


            //I guess the scope is acting weird according to the below line test
            $scope.CategoryArray.push({name: $scope.$id});
        };

    }]
}
});

This directive somehow works when we add levels of groups, and start adding conditions from inside out. I cannot debug what exactly is causing it. Please let me know if the question is still not clear.

Answer 1

I think I found your issue. The problem is not with angular's scopes but rather with the way you are displaying the modals. Because you are using id's to toggle the modal, it's value is the same for all other modal added. When you click the find button you will ALWAYS show the first modal.

I've chosen the scope's id to discriminate between modals, but you can choose another way that best suits you

<script type="text/ng-template" id="/educationCategories.html">
        <button class="btn" type="button" style="margin-left:5px" data-ng-click="populateCategories()" data-toggle="modal" data-target="#mymodal-{{$id}}">find</button>
                <div class="modal fade" id="mymodal-{{$id}}" tabindex="-1" role="dialog" aria-labelledby="fieldSelectorModalTitle">
                    <div class="modal-dialog modal-dialog-centered" role="document">

A working plunk with the fix can be found here: https://plnkr.co/edit/tiRP759iy4pfyOqEDcDZ?p=preview