Model change not getting reflected in view in angularjs

Question

I have got a main index page, in which i initially hide the footer bar. But i want to display it when some item is clicked in some child view. I can see in the logs the model is getting changed, but its not getting reflected in the view.

index page:

<body ng-app="starter">

<ion-pane ng-controller="AudioCtrl">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <ion-content></ion-content>
    <ion-footer-bar ng-hide="musicBar.hide">
        <div class="audio-block">
            .....
        </div>
    </ion-footer-bar>
</ion-pane>
</body>

The child view page:

<ion-view ng-controller="AudioCtrl as controller" title="{{selectedCategory}}">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="item in items" ng-click="$parent.songClicked()">{{item.desc}}</ion-item>
        </ion-list>
    </ion-content>
</ion-view>

The angular code:

app.controller('AudioCtrl', function ($sce, $scope) {
        $scope.musicBar= {
            hide: true
        };
        $scope.songClicked = function(){
            console.log($scope.musicBar.hide);
            $scope.musicBar.hide = false;
            console.log($scope.musicBar.hide);
        };
    }

);

When i click the item i can see musicBar.hide changing from true to false, but its not reflected in the view. I have also check other similar questions but the solution doesn't work. I have tried using $scope.$digest() and $scope.$apply(), but then i get apply already in progress.

JB Nizet JB Nizet · Accepted Answer · 2015-09-27T12:40:44

The index.html and the cub view are each managed by their own instance of AudioCtrl, each having their own scope.

The header is made visible when the main view scope's musicBar.hide becomes true, but that never happens, because the subview doesn't modify it. It modifies the sub view scope's musicBar.hide variable.

I don't see any reason why a sub view would have the same controller as the main view. It shouldn't.

Model change not getting reflected in view in angularjs

1 Answers