Угловая директива не отображает значения области видимости

Question

Моя директива использует сервис, который возвращает обещание, мне нужно отобразить в шаблоне атрибуты области geoZip, geoCity и geoState.

Проблема в том, что эти переменные области не отображаются в шаблоне, я просто вижу запятую.

Что делать, чтобы отображать переменные области видимости?

Это моя директива код:

.directive('cityStateZip', function() { 
     return { 
     restrict: 'A', 
     transclude: true, 
     scope: { 
      zip: '=', 
     }, 
     template: '<p>{{geoCity}}, {{geoState}} {{geoZip}}</p>', 
     controller: ['$scope', 'GeolocationService', function ($scope, GeolocationService) { 
      GeolocationService.geocode($scope.zip).then(function(result) { 
      if (result) { 
       console.log(result); 
       $scope.geoZip = result['address_components'][0]['long_name']; 
       $scope.geoCity = result['address_components'][1]['long_name']; 
       $scope.geoState = result['address_components'][2]['short_name']; 
      } 
      }); 
     }] 
     }; 
    }) 

.service('GeolocationService', ['underscore', '$q', function (underscore, $q) { 
    var gs = {}; 

    gs.geocode = function(address) { 
    var geocoder = new google.maps.Geocoder(); 
    var deferred = $q.defer(); 
    geocoder.geocode({ "address": address }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
     return deferred.resolve(underscore.first(results)); 
     } 
     return deferred.reject(); 
    }); 
    return deferred.promise; 
    } 

    return gs; 
}]); 

Answer 1

я обнаружил, что я должен использовать сервис $ таймаут, чтобы сделать его работу:

.directive('cityStateZip', function() { 
    return { 
    restrict: 'A', 
    transclude: true, 
    scope: { 
     zip: '=', 
    }, 
    template: '<p>{{geoCity}}, {{geoState}} {{geoZip}}</p>', 
    controller: ['$scope', '$timeout', 'GeolocationService', function ($scope, $timeout, GeolocationService) { 
     GeolocationService.geocode($scope.zip).then(function(result) { 
     if (result) { 
      console.log(result); 
      $timeout(function() { 
      $scope.geoZip = result['address_components'][0]['long_name']; 
      $scope.geoCity = result['address_components'][1]['long_name']; 
      $scope.geoState = result['address_components'][2]['short_name']; 
      }); 
     } 
     }); 
    }] 
    }; 
}) 

Пожалуйста, дайте мне знать, если есть лучшая альтернатива (не используя $ timeout), спасибо!