title: Show image dynamically in AngularJS
body: <p>I am using http request to get the path of image from database and images are located in the server.</p>
  
  <p>I want to show that image in img src.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>  $http({
      url     : 'user_profile_exec.php',
        method: "GET",
        params: {uid: user_id}
      })
      .success(function(data) {
        $scope.fname = data.cv_fname;
        $scope.lname = data.cv_lname;
        $scope.pic = data.pic;
        alert($scope.pic);
      }
    });
  </code></pre>
  
  <p>It is showing the data in network tab also data is showing in alert box.</p>
  
  <p>Here is the body code:</p>
  
  <pre><code>&lt;div id="errors" class="kari" style="display: center" ng-style="{'display':$scope.pic == ''?'none':'block'}"&gt;
  &lt;img src="./img/2.jpg" class="img-responsive " /&gt;
      {{pic}}
  &lt;/div&gt;
  
  &lt;div id="errors" class="kari" style="display: center" ng-style="{'display':$scope.pic != ''?'none':'block'}"&gt;
      &lt;img src="{{pic}}" class="img-responsive " /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately 2.jpg is showing, however I am expecting the output of image path that is stored in database.</p>
  
  <p>I also tried like below, but I am getting error <code>pic</code> is not defined. </p>
  
  <pre><code>&lt;div id="errors" class="kari" style="display: center" ng-style="{'display':pic == ''?'none':'block'}"&gt;
  &lt;img src="./img/2.jpg" class="img-responsive " /&gt;
      {{pic}}
  &lt;/div&gt;
  
  &lt;div id="errors" class="kari" style="display: center" ng-style="{'display':pic != ''?'none':'block'}"&gt;
      &lt;img src="{{pic}}" class="img-responsive " /&gt;
      {{fname}}
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>