How to bind data from controller to view in angular using rest call

Question

I have successfully populated data from rest call and after that i'm able to get detail of that data by hitting a click event using its id. I'm able to print data in console but unable to bind it in template. Here is my code.

service.js:

 (function() {
            angular.module('myApp').service('registerService', registerService,restService);
        var baseUrl:"http://localhost:xxxxxxxxxxx"
            function registerService($q, $http) {
                //var category={};
                var deferred = $q.defer();
                //function to get all category
                     this.getAllCategory = function () {

                         //calling json data
                         return $http.get(baseUrl).then(function (response) {
                                 category = response.data;
                                 deferred.resolve(category);
                                 return deferred.promise;
                             },
                             function (error) {
                                 deferred.reject(error);
                                 return deferred.promise;
                             });
                     },
                         //function to get category by id
                    this.getSubCategory = function (id) {
                        console.log('inside subcategory');
                        return $http.get(baseUrl + '/' + id)
                            .success(function (response) {
                                deferred.resolve(response.data);
                                  return deferred.promise;
                            },
                            function (error) {
                                deferred.reject(error);
                                return deferred.promise;
                            });
                    };
            }
        })();

controller.js:

(function () {
        angular.module('shoppingPad').controller('registerCtrl', registerCtrl);

        function registerCtrl($scope, registerService, $stateParams, $state, Page) {

            // var categoryId = $stateParams.categoryId;

            $scope.category = null;
            $scope.cur_category = null;

            //getCategory function to get all category from rest call.

            $scope.getCategory = function () {
                //setting title for registration
                Page.setTitle('Registration');
                registerService.getAllCategory().then(function (response) {
                    $scope.category = response;
                    console.log($scope.category);
                   })
            };

            //passing id to subCategory function to get sub category by id

            $scope.subCategory = function (id) {
                //setting title for sub-category
                  Page.setTitle('Sub-Register');
                registerService.getSubCategory(id).then(function (data) {
                      console.log(data);
                      $scope.cur_category = data;
                      console.log($scope.cur_category);
                      $state.go('app.home.register3', {'categoryId': id})
                });

            };
             $scope.signin = function () {
                $state.go('app.login.step1')
            }

        }
    })();

registration-2.html:

 <md-content ng-controller="registerCtrl">
        <h3 class="Select-Sub-category">Select Sub-Category</h3>
        <div layout="row" layout="column" flex=100"  style="width:200px;">
            <div style="margin-left:16px" class="Rectangle-425-Copy-3"  flex-gt-sm="50">
                <span class="RETAIL">{{cur_category.name}}</span>
            </div>
        </div>
    </md-content>

And in app.js i have defined a state like this:

 $stateProvider.state('app.home.register2', {
                        url: "/register",
                        templateUrl: 'template/register/registration-1.html',
                        controller: 'registerCtrl',

                    })
                    .state('app.home.register3', {
                        url: "/register/{categoryId:[0-9]{1,5}}",
                        templateUrl: 'template/register/registration-2.html',
                        controller: 'registerCtrl' 

                    })

Answer 1

you have to create another function in your register.js which call subCategory(). update your code with this it will work.

var categoryId=$stateParams.categoryId;

$scope.categoryData=function(){
 $scope.subCategory(categoryId);
}

and call this function in your registration-2.html.

<md-content ng-init="categoryData()">
        <h3 class="Select-Sub-category">Select Sub-Category</h3>
        <div layout="row" layout="column" flex=100"  style="width:200px;">
            <div style="margin-left:16px" class="Rectangle-425-Copy-3"  flex-gt-sm="50">
                <span class="RETAIL">{{cur_category.name}}</span>
            </div>
        </div>
    </md-content>

Answer 2

Your code just send a id. Your code need to;

• Send data

OR

• Send id and get data with service.

There is a good solution for send data one state to another state:

Angular ui router passing data between states without URL