How to display dynamically loaded images with AngularJS

Question

I'm trying to display an avatar of an user once the user logs in:

<img src="{{(API_PROVIDER.domain + user.avatar.small_thumb.url)}}" alt="" class="img-circle size-30x30">

But the above code only works if I reload the page after login. How can I get it to work without having to programmatically reload the page?

PS: The above resolves to something like this: www.example.com/api/something.jpg

EDIT:

I have tried using ng-src instead of src and it didn't work. As to the other comment whether my variables were in scope, yes, the avatar link is only defined when the user signs in. Then I use $state.go('somewhere') to change the template, in which case I'd image the variable should be updated.

Here's my main controller:

(function() {
  'use strict';

  angular
    .module('admin')
    .controller('MainController', MainController);

  /** @ngInject */
  function MainController($timeout, webDevTec, toastr, $scope, $http, authenticatedUser, Session, $anchorScroll, API_PROVIDER) {

    ...

    $scope.session = Session;
    $scope.user = Session.user;
    $scope.API_PROVIDER = API_PROVIDER;

    ...

  }
})();

Here ar the components of my Session (reduced for brevity):

...
this.create = function(user) {
    this.user = user;
    this.role = user._role;
    this.token = user.auth_token;
    this.userRole = user._role;
};
return this;
...

And how the session is saved for later retrieval:

...
$window.sessionStorage["userInfo"] = JSON.stringify(loginData);
...

Do I need to use $apply() in this case? If yes, how so?

EDIT 3: Here's how I'm setting my Session object

authService.login = function(user, success, error, $state) {
  $http.post(API_PROVIDER.full_path + 'signin', user).success(function(data) {

  if(data.success){
    var user = data.user;
    var loginData = user;
    $window.sessionStorage["userInfo"] = JSON.stringify(loginData);
    delete loginData.password;
    Session.create(loginData);
    $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
    success(loginData);
  } else {
    $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    error();
  } 
  });
};

Answer 1

Force reload images

https://stackoverflow.com/a/21731946/2906183

Apply time stamp and call $scope.$appy()

Answer 2

Use fall back

HTML:

<img fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/>

JS:

myApp.directive('fallbackSrc', function () {
  var fallbackSrc = {
    link: function postLink(scope, iElement, iAttrs) {
      iElement.bind('error', function() {
        angular.element(this).attr("src", iAttrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});