How to display img from server in angularJS

Question

I want to display an image from the server, my function is this:

$scope.getImage = function() {

        $http({method: 'GET', url: 'http://url.com/provawp/api/user/get_avatar/?user_id=1&type=full'}).
        success(function(data, status, headers, config) {

            var img=data.avatar;
            var element = $('<div>').html(img);
            var source = element.find('img').attr("src");
            return source;
            console.log("immagine" + source);

         }).
         error(function(data, status, headers, config) {

             console.log("errore avatar");
         });
     }

I extract my img and then want to display it in html:

   <ons-list-item  class="list-item-container">
      <div class="list-item-left">
        <img ng-src="{{getImage()}}" class="avator">
      </div>
      <div class="list-item-right">
        <div class="list-item-content">
          <div class="name">{{post.author.name}}</div>
          <span class="desc">{{formatDate(post.date)  |  date:"dd/MM/yyyy"}}         </span>
        </div>
      </div>
    </ons-list-item>

obviously there is a controller on the page; When I run my log error, do the following:

Unprepared error: [$ rootScope: infdig] 10 $ digest () iterations reached. Aborting! Observers fired in the last 5 iterations: []

my Json details:

  {"status":"ok","avatar":"<img src=\"http:\/\/url.com\/provawp\/wp- content\/uploads\/2015\/06\/rest5b-150x150.jpg\" width=\"150\" height=\"150\" alt=\"admin\" class=\"avatar avatar-150 wp-user-avatar wp-user-avatar-150 alignnone photo\" \/>"}

Answer 1

ng-src {{}} URL ajax . digest, $http

: [$ rootScope: infdig] 10 $digest() . Aborting! 5 : []

, , ajax scope, scope ng-src.

getImage .

<img ng-src="{{myImage}}" class="avator">

$scope.getImage = function() {
    $http({
        method: 'GET',
        url: 'http://url.com/provawp/api/user/get_avatar/?user_id=1&type=full'
    }).
    success(function(data, status, headers, config) {
        $scope.myImage = data.avatar;
        //return source; //no need to return data
    }).
    error(function(data, status, headers, config) {
        console.log("errore avatar");
    });
};
$scope.getImage(); //call this from the controller init.