Angularjs demo with modal popup

Coded for this SO question: http://stackoverflow.com/questions/29807422/creating-popup-window-with-form-content-and-then-show-output-in-parent-page-and?

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div ng-controller="mainController">


  <div>
   <strong> message: </strong>{{message}}
  </div>

  <div id="fileContents">
   <strong> filecontents: </strong>{{fileContents}}
  </div>
  
  <a href = "#" class = "btn btn-default" ng-click = "openModal()"> modal test</a>

  <label class="btn btn-default" for="fileOpen">Open File </label>
  <input style="display: none" type="file" fileread="onFileRead" id="fileOpen" name='file' prefn = "openModal"/>


		<script type="text/ng-template" id="AbandonChangesModal.html">
        <div class="modal-header">
            <h4 class="modal-title"> This will abandon changes. Do you wish to continue?</h4>
        </div>

		<div id = "" class = "modal-body" ng-show = "data.message">
			
		</div>

		<div class="modal-footer">
			<div class ="flex-right-left-and-right">
				<div>
					<a href = "#" class = "btn btn-success" ng-click = "saveAndContinue()"> Save and Continue</a>
				</div>
				<div>            
					<a href="#" class="btn cancel btn-primary" ng-click = "yes()">Yes</a> 
   	     	    <a href="#" class="btn cancel btn-danger" ng-click = "cancel()">Close</a>
					</div> 
    	 	   </div>
			</div>
		</div>
    </script>

</div>

CSS

body {
    padding: 5px;
}

.flex-right-left-and-right{
	display: flex;
	flex-direction: row;
	align-items: stretch; 
	justify-content: space-between; 
}

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('mainController', function($scope, $modal, $log) {
		$scope.fileContents = ""; 

    $scope.products = ['coffee', 'beer', 'wine', 'tea', 'milk'];

  $scope.onFileRead = function(contents) {
  	$scope.message = "file opened";
    $scope.fileContents = contents;
  };
  
  $scope.openModal = function () {
  							 		var modalInstance = $modal.open({
								 
								 backdrop: false, 
								 keyboard: true,


								 templateUrl: 'AbandonChangesModal.html',
								 controller: 'AbandonChangesModalCtrl',
								  
								  resolve: {
										data: function () {
											return null; 
											 
											
								        }
									  }
						
								});
  };
}); 

app.directive("fileread", [function() {
  return {
    scope: {
      fileread: "=",
      prefn: "="},
    link: function(scope, element, attributes) {

        	element.bind("click", function(event){
        		if (scope.prefn){			// prefn is optional
        			//event.preventDefault();
        			
	        		scope.$apply(function(){
	            		scope.prefn().then(
	            			function() {
	            				$timeout(function(){
	            				 //Resume file dialog    					
	            				}); 
	            			}, 
	            			function() {
	            				//Don't open file dialog
	            			}
	            		); 	            		         		
	        		});
        		}        
        	});


      element.bind("change", function(changeEvent) {

					scope.$apply(function() {
          var file = changeEvent.target.files[0];

          var reader = new FileReader();
          reader.readAsText(file);
          
          reader.onload = function(e) {
            scope.$apply(function() {
              var contents = e.target.result;
              scope.fileread(contents);
            });
          };

        });

      });

    }
  }
}]);

app.controller("AbandonChangesModalCtrl", function($scope, ...