AngularJS ng-init not initializing variable globally

Question

I am using ng-repeat of angularjs directive to load the array which have JSON value store in it. and value has subarray also.

<div ng-repeat="data in MENULIST"  >  //MENULIST have array(Data)

after checking some conditions like (if:condition).

<div ng-if="(data.SubMenu.length >0)" ng-init = "MENULIST = data.SubMenu"></div>

but that assignment or initialization is not been done globally to MENULIST it limited to this div Only.

ng-repeat stop after printing two main array elements.

not printing Sub Element of Array Element.

actually, I am trying to make and tree structure in the sidebar that has menu and sub menus also.

Answer 1

Besides two-way binding should work for you I believe calling some function is more straightforward way(especially since you can create this function in scope of particular controller - so it would be much easier to get the point)

<div ng-if="(data.SubMenu.length >0)"
     ng-init = "someController.setMenuList(data.SubMenu)">
</div>

Another "angular-way" is adding explicit watcher to data.Submenu.length in component's JS code

$scope.$watch('data.Submenu.length', function (value, oldValue) {
    if (!value && oldValue) {
        // do your init
    }
});