ng-include inside ng-controller doesn't work correctly

Question

I have an html file with ng-includes inside

<div ng-controller="MapMenuCtrl">
    <div class="mapMenu row">
        <ng-include src="'partials/mapMenu/filterDropdown.html'"></ng-include>
        <ng-include src="'partials/mapMenu/alertDropdown.html'"></ng-include>
        <ng-include src="'partials/mapMenu/investigationDropdown.html'"></ng-include>
    </div>
</div>

The problem is that I need MapMenuCtrl for each of ng-include. But when it is set as in example, it works, but only a half. For example in one of this files I use ng-model for one of $scope variables of MapMenuCtrl and it doesn't bind. I was trying to set controller for each of ng-include, but it loads 3 times, though I need only 1. I hope you understood me. I know, that my english is quite bad

Answer 1

ng-include creates a new scope. Put an object on the controller scope and put all bindable stuf inside. You can call it model for example. Then the bindings should work as expected.

Here is a link for a details of the problem you face i believe: Does my ng-model really need to have a dot to avoid child $scope problems?