Update image source of image tag using angularjs
<p>This is the HTML</p>

<pre><code>&lt;div class="container"&gt;          
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;

              &lt;div ng-controller="urlController"&gt;

                &lt;input type="text" ng-model="imgUrl" /&gt;         

                &lt;button ng-click="viewPath()"&gt;View&lt;/button&gt;
                &lt;button ng-click="setPath()"&gt;Save&lt;/button&gt;

                &lt;img ng-src="{{ newUrl }}" /&gt;  
              &lt;/div&gt;

          &lt;/div&gt;
      &lt;/div&gt;
</code></pre>

<p>This is my angular code:</p>

<pre><code>var mySettings = angular.module('mySettings',[]);

mySettings.controller('urlController', ['$scope', '$location', '$log', function($scope, $location, $log){

    $scope.imgUrl = '';

    $scope.viewPath = function (){
        $scope.newUrl = $scope.imgUrl;
    }

    $scope.setPath = function () {
        var myPath = $location.path($scope.newUrl);

        $log.info(myPath);
    };
</code></pre>

<p>Explanation:</p>

<p>Here I have a input tag to put the absolute link of image and image tag which will show the image when i press view button.</p>

<p>Now there is another button that is save which i want to perform a simple function that is to save/update the link pasted in input box into the image source. So the next time if I press refresh, it should show me the linked image as its source.</p>

<p>Problem:
If I paste a local link eg. d:\bla.png img src tag says unsafe.
If I paste a http link it show the image in image tag but does not save on pressing the save button to $scope.newUrl object. So if I press refresh the image is gone.</p>

<p>Need solution and if there is a post which can explain the procedure step by step it will be great.</p>