$q not showing until scope change
HTML
<div ng:app="myApp">
<div ng-controller="Ctrl">
Hello <input ng-model='name' ng-model-instant> <hr/>
<span ng:bind="name"></span> <br/>
<span ng:bind="result.aField"></span>
</div>
</div>
CSS
</style>
<script src="http://ci.angularjs.org/job/angular.js-misko/ws/build/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller("Ctrl", ['$scope',myService, function($scope){
$scope.name = 'angular';
$scope.result = myService($scope.name);
$scope.data = "some data";
}]);
myApp.factory('myService', ['$q', '$rootScope', function($q, $rootScope) {
return function(name) {
var d = $q.defer();
setTimeout(function () {
try {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
$rootScope.$apply(function () {
var longitude = position.coords.longitude;
d.resolve({
aField: 'Hello ' + position.coords.longitude + '!'
});
});
},
function (error) {
d.reject(error);
}
);
}
else {
d.reject('location services not allowed');
}
}
catch (err) {
d.reject(err);
}
}, 1000);
return d.promise;
};}]);