Попытка установить массив данных в $scope после вызова функции из представления

Question

Я пытаюсь установить массив данных в $scope после вызова функции getDetails(detail) из вида, но когда я делаю это, я не вижу свои данные в своем представлении, но если я console.log это в моем контроллере, данные там,

посмотреть, где я нажимаю отправку данных в контроллер:

 <hr>
  <ul class="rel-results">
 <li ng-repeat="detail in details">
  <a ng-click="getDetails(detail)" href="#/details"> {{detail.longName} </a>
 </li>
  </ul>

посмотреть, что перенаправлено, и я хочу информацию:

  <div class="testt">
    <ul class="test">
      <li ng-repeat="routedetail in routedetails">
       <a ng-bind="routedetail.name">{{routedetail.name}}</a>           
    </li>
 </ul>
</div>

мои маршруты:

 angular.module('myApp').config(function($routeProvider) {
$routeProvider.when("/routes", {
    templateUrl: "routes.html",
    controller : "transportController"


});

$routeProvider.when("/details", {
    templateUrl: "details.html",
    controller : "transportController"

});

$routeProvider.otherwise({redirectTo: "/routes"});
});

контроллер:

angular.module("myApp").controller('transportController', function($scope, $http, $base64){

$scope.getDetails = function(detail){
var encoded = $base64.encode("xxx:xxx");
$http({
  url: "xxx",
  headers : {
    "X-AppGlu-Environment":"staging",
    "Authorization": "Basic "+encoded,
    "Content-Type" : "application/json; charset=utf-8"
  },
  method: 'POST',
  data: { 
    "params":{
      "routeId": detail.id
    }
  }
}).then(function(response){ 
    $scope.routedetails = response.data.rows; 
    console.log($scope.routedetails); // it's possible to see the data here it's a array of objects
   console.log($scope.$id); // i can't see this id in my view
 });

 }
});

Answer 1

Я сделал два jsfiddle с рабочими примерами: Пример JSFiddle 1

angular.module("myApp").controller('transportController', function($scope, $http, $base64) {

    //Initialize array outside : IMPORTANT
    $scope.routedetails = [];

    $scope.getDetails = function(detail) {
        var encoded = $base64.encode("xxx:xxx");
        $http({
            url: "xxx",
            headers: {
                "X-AppGlu-Environment": "staging",
                "Authorization": "Basic " + encoded,
                "Content-Type": "application/json; charset=utf-8"
            },
            method: 'POST',
            data: {
                "params": {
                    "routeId": detail.id
                }
            }
        }).then(function(response) {

            //Clear entire array
            $scope.routedetails.splice(0, $scope.routedetails.length);

            //Fill array with returned data
            response.data.rows.forEach(function(element) {
                $scope.routedetails.push(element);
            });

        });
    }
});

Пример JSFiddle 2

angular.module("myApp").controller('transportController', function($scope, $http, $base64) {
    //Initialize array outside : IMPORTANT
    $scope.routedetails = [];

    $scope.getDetails = function(detail) {
        var encoded = $base64.encode("xxx:xxx");
        $http({
            url: "xxx",
            headers: {
                "X-AppGlu-Environment": "staging",
                "Authorization": "Basic " + encoded,
                "Content-Type": "application/json; charset=utf-8"
            },
            method: 'POST',
            data: {
                "params": {
                    "routeId": detail.id
                }
            }
        }).then(function(response) {

            $scope.routedetails = response.data.rows;

        });
    }
});