How can i share variables between views, with the same controller in AngularJS?

Question

I have this controller...

app.controller('UploadController', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });
    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
            }
        }
    };
}]);

i'm assigning to the var file the temp obtained from files[i] , so i can display the temp like a preview on my view.

 <section ng-controller="UploadController">
      <img ngf-src="files[0]" ng-show="files[0].type.indexOf('image') > -1">
 </section>

but what I really need is to show the temp in my modal view.

 <section ng-controller="UploadController">
      <img ngf-src="files[0]" ng-show="files[0].type.indexOf('image') > -1">
 </section>

The modal view have the same controller and the same "img" attributes, but when i display the modal view the controller RESTART , this is the point of the question, i need to learn how can i keep the value of a variable in the same controller but in an different view without the need to redo actions.

basically i need: when displaying a view, my controller does not restart .

Answer 1

<img src=""> takes image's url or image's path. Once you upload the image to the server. If you could returns the image url instead of the image data, the image should be displayed properly.