Update image source of image tag using angularjs

Question

This is the HTML

<div class="container">          
      <div class="row">
          <div class="col-md-12">

              <div ng-controller="urlController">

                <input type="text" ng-model="imgUrl" />         

                <button ng-click="viewPath()">View</button>
                <button ng-click="setPath()">Save</button>

                <img ng-src="{{ newUrl }}" />  
              </div>

          </div>
      </div>

This is my angular 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);
    };

Explanation:

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.

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.

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.

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