AngularJS: I am not able to get the http.get's JSON data from parent state's controller

Question

I have a nested view like so:

.state('xyz',{
    url:'/xyz',
    templateUrl: 'tpl/xyz.html'
    controller : 'xyzCtrl'
})
.state('xyz.abc',{
    url:'/abc',
    templateUrl: 'tpl/abc.html'
})

and controller:

app.controller('xyzCtrl', ['$scope','$htpp', function($scope,$http){
    $scope.data = [];
    $http.get('../js/data.json').then(function(res){
    $scope.data = res.data;
    });
}]);

The problem is I get the value for data in xyz's view but I am not able to get it in abc's view. Normally the child inherits the parents scope data right?

Answer 1

abstract - {boolean=} - An abstract state will never be directly activated, but can provide inherited properties to its common children states.

Try this make abstract:true

.state('app',{
    abstract: true,
    url: '/app',
})
.state('app.xyz',{
    url:'/xyz',
    templateUrl: 'tpl/xyz.html'
    controller : 'xyzCtrl'
})
.state('app.abc',{
    url:'/abc',
    templateUrl: 'tpl/abc.html'
})