var app = angular.module('myApp', []);
//---------------------------------------------------------------------------------
app.service('myService', ['$http', '$rootScope', function ($http, $rootScope) {
// data private access
var inData = {
cpt: 0,
mytext: 'hello who ?',
extData: undefined
};
var loadData = function () {
console.log("loadData");
var data = {
"hello": 'world'
};
return $http.post('/echo/json/', 'json=' + encodeURIComponent(angular.toJson(data)), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
};
// data public access with getter setter
this.outData = {
get extData() {
console.log("get extData");
if (!inData.extData) {
inData.extData = "loading ..."; // init to avoid loop loading
var myPromise = loadData();
myPromise.then(function (response) {
console.log("myPromise success");
inData.extData = response.data;
$rootScope.$$phase || $rootScope.$apply();
}, function (response) {
console.log("myPromise error");
inData.extData = "error";
$rootScope.$$phase || $rootScope.$apply();
});
}
return inData.extData;
},
get cpt() {
console.log("get cpt");
return inData.cpt;
},
get text() {
console.log("get text");
return inData.mytext;
},
set text(val) {
console.log("set text");
inData.cpt = inData.cpt + 1;
inData.mytext = val;
}
};
this.showData = function () {
console.log('nb update ' + inData.cpt);
};
}]);
//---------------------------------------------------------------------------------
app.controller('MainCtrl', ['$scope', 'myService', function ($scope, myService) {
console.log('online');
$scope.data = myService.outData;
$scope.showData = function () {
myService.showData();
};
}]);
<div data-ng-controller="MainCtrl">
<h1>text: {{data.text}}</h1>
<input type="text" data-ng-model="data.text" />
<h2>nb update: {{data.cpt}}</h2>
<button type="button" data-ng-click="showData()">Show</button>
<h2>text: {{data.extData}}</h2>
</div>
External resources loaded into this fiddle: