var myApp = angular.module('myApp', []);
myApp.service('ajaxService', function ($rootScope) {
this.getEntries = function () {
var url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://madroom-project.blogspot.com/feeds/posts/default&callback=?';
$.ajax({
url: url,
dataType: 'json',
success: function (response) {
$rootScope.$broadcast('getEntriesCompleted', {
response: response
});
}
});
}
});
myApp.controller('ajaxCtrl', function ($scope, ajaxService) {
$scope.entries = [];
$scope.getEntries = function () {
ajaxService.getEntries()
}
$scope.$on('getEntriesCompleted', function (event, params) {
var entries = params.response.responseData.feed.entries;
console.log(entries);
$scope.$apply(function () {
angular.copy(entries, $scope.entries);
});
});
});
<div ng-app="myApp">
<div ng-controller="ajaxCtrl">
<button ng-click="getEntries()">Get Entries</button>
<div ng-repeat="entry in entries">
<p>{{ $index + 1 }}: <a href="{{ entry.link }}" target="_blank">{{ entry.title }}</a>
</p>
</div>
</div>
</div>
p {
font-size: small;
}
External resources loaded into this fiddle: