AngularJs: View is not displaying data even though the data is present in controller -

i have following controller , view , want display properties of productcategory object in view. though productcategory present in controller, not displayed in view.

controller:

angular.module('jordans')     .controller('productcategoryctrl', function ($scope, $rootscope, dataservice) {         $scope.productcategories = [];         $scope.currentdata = {};         $scope.productcategory = [];          $scope.getcategories = function () {             dataservice.getproductcategories().then(function (data) {                 $scope.productcategories = data; //                    console.log('productcategories = ' + json.stringify($scope.productcategories));             })         }          $scope.getcategory = function () {             $scope.productcategory = dataservice.getproductcategory($scope.currentdata);             console.log('productcategory = ' + json.stringify($scope.productcategory));         }          $rootscope.$on('setcategory', function (e, args) {             console.log('******** ' + new date());              $scope.currentdata.category = args.category;             $scope.currentdata.type = args.type;             console.log('*******productcategory.currentdata = ' + json.stringify($scope.currentdata))             $scope.getcategory($scope.currentdata);         });          var init = function () {             $scope.getcategories();         };          init();      }) 

view:

<div ng-controller='productcategoryctrl' ng-hide="data.error"> <div class="col-sm-10">     <img src="..\assets\images\{{productcategory.image[0].name}}">     <p class="categoryheading">{{productcategory.image[0].label}}</p>     <div ng-repeat="productimage in productcategory.image">         <div ng-if="$index > 0">             <div class="col-sm-4 typemargin">                 <div class="card">                     <div class="card-block">                         <img src="..\assets\images\{{productcategory.image[i].name}}">                     </div>                     <div class="card-text">                         <p><b>{{productcategory.image[$index].label}}</b></p>                     </div>                 </div>             </div>         </div>     </div> </div> 

i think problem productcategory array , you're doing ng-repeat on productcategory.image[0] , can't access that, access productcategory[0].image[0].

you should loop through productcategory array , put code. ng-repeat on entire block :

<div class="col-sm-10" ng-repeat="prodcat in productcategory"> 

...and use prodcat inside div block instead of productcategory.

also hint, not related problem, when you're using console.logs don't use concatenation + use comma , i.e.

console.log('productcategory', $scope.productcategory); 

this way won't need jsonstringify , you'll nice object can interact in console.

also posiblity need productcategory[0].image, don't know test object it's guess.