Accessing $scope of another controller - ngDialog in AngularJS

Question

I'm instantiating ngDialog like below;

ngDialog.open({
    template: 'mod-details',
    className: "ngDialog-theme-large",
    showClose: false,
    closeByDocument: false,
    closeByEscape: false,
    controller: ['$scope', function($scope) {
        // controller logic
        $scope.isValid = true;
        $scope.orderItem = orderItem;
        $scope.countSelection = function() {
            var count = 0;
            angular.forEach($scope.modifier.menu_modifier_items, function(item){
                count += item.selected ? 1 : 0;
            });
            console.log(item);
            return count;
        }
    }]
});

I then use $scope.orderItem with ng-repeat like below;

<div ng-repeat="modifier in orderItem.menu_modifier_groups">
        <div class="menu--modifiers-group" modifier="modifier">
            <div class="group-title" ng-class="{'group-hasError': !isValid}">
                <div class="title-s ng-binding" ng-bind="modifier.name"></div>
                <div class="clearfix"></div>
                <span class="text-muted ptop5" ng-if="modifier.instruction" ng-bind="modifier.instruction"></span>
            </div>

            <div class="group-items" ng-if="modifier.max_selection_points > 1 || (modifier.max_selection_points == 1 && modifier.min_selection_points == 0)">
                <div ng-repeat="item in modifier.menu_modifier_items" class="modifier-item multiple">
                    <label for="<%modifier.id + '_' + item.id%>" ng-click="modifierClicked(item)">
                        <input id="<%modifier.id + '_' + item.id%>"
                               class="checkbox-branded"
                               type="checkbox"
                               name="<%item.name%>"
                               ng-model="item.selected"
                               ng-class="{'not-available': !item.available}"
                               title="<%item.name%>"
                               value="<%item.id%>"
                               ng-disabled="!item.selected && countSelection() == modifier.max_selection_points"
                               ng-click="modifierClicked(item)"
                               ng-change="modifierSelected(item, false)">
                <span class="item-name">
                    <span ng-bind="item.name"></span>
                    <span ng-bind="priceDelta(modifier, item)"></span>
                </span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

I'm not able to access modifier in ng-repeat="modifier in orderItem.menu_modifier_groups" or modifier.menu_modifier_items in ng-repeat="item in modifier.menu_modifier_items" in my countSelection function

I've attached a screenshot of ng-inspector.

Answer 1

$scope.modifier is never created into your controller. Your countSelection function can't know which item of the array is being selected this way. One way you could do, is to pass a reference of the array to your function when calling it. Like this:

countSelection(modifier.menu_modifier_items);

And, on the controller:

$scope.countSelection = function(selection) {
        var count = 0;
        angular.forEach(selection, function(item){
            count += item.selected ? 1 : 0;
            console.log(item);
        });
        return count;
    }