title: How to display dynamically loaded images with AngularJS
body: <p>I'm trying to display an avatar of an user once the user logs in:</p>
  
  <pre><code>&lt;img src="{{(API_PROVIDER.domain + user.avatar.small_thumb.url)}}" alt="" class="img-circle size-30x30"&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>PS: The above resolves to something like this: www.example.com/api/something.jpg</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have tried using <code>ng-src</code> instead of <code>src</code> 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 <code>$state.go('somewhere')</code> to change the template, in which case I'd image the variable should be updated. </p>
  
  <p>Here's my main controller:</p>
  
  <pre><code>(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;
  
      ...
  
    }
  })();
  </code></pre>
  
  <p>Here ar the components of my Session (reduced for brevity):</p>
  
  <pre><code>...
  this.create = function(user) {
      this.user = user;
      this.role = user._role;
      this.token = user.auth_token;
      this.userRole = user._role;
  };
  return this;
  ...
  </code></pre>
  
  <p>And how the session is saved for later retrieval:</p>
  
  <pre><code>...
  $window.sessionStorage["userInfo"] = JSON.stringify(loginData);
  ...
  </code></pre>
  
  <p>Do I need to use <code>$apply()</code> in this case? If yes, how so?</p>
  
  <p><strong>EDIT 3: Here's how I'm setting my <code>Session</code> object</strong></p>
  
  <pre><code>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();
    } 
    });
  };
  </code></pre>