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

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<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-app="myApp" ng-controller="IndexController">
  <script type="text/ng-template" id="about.html">
    This is my about page. 
    
     <br><br>
     <input type="text" name="name" class=" input-sm" ng-model="userName"   />   <br><br>
     <input type="text" name="gender" class="input-sm" ng-model="gender"   />   <br><br>
  </script>

  <script type="text/ng-template" id="index.html">
    Hi, how are you doing? Click <a href="#/about">here</a> to view the about page.
  </script>

  <script type="text/ng-template" id="modal.html">
    <div class="modal-header">
    <h3 class="modal-title">Modal Window</h3>
		</div>
    <div class="modal-body">
     <form role="form" name="nameForm" novalidate class="form-horizontal">
    <div class="form-group">
            <label class="control-label">Choose gender</label>
            <select ng-model="gender" name="genderType" class="form-control input-medium" required>
                <option value="">---Please select---</option>
                <option value="m">Male</option>
                <option value="f">Female</option>               
            </select>
        </div>
       <div class="form-group">
            <label class="control-label">Enter Name</label>
            <div class="m-grid-col-lg-10" ng-class="{ 'has-error': nameForm.userName.$invalid }">
               <input type="text" name="userName" required ng-model="userName" class="form-control input-lg input-small" />
            </div>
        </div>
        {{userName}}
        </form>
    </div>
   ...

CSS

body {
    padding: 5px;
}

JavaScript

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

app.controller('IndexController', function($scope, $log) {
    
});

app.controller("AboutController", ['$location', '$state', '$scope', '$filter','myService', function($location, $state, $scope, $filter, myService) {
 var data = "";
   $scope.mymodal = myService.openModal(data);

}]);

app.controller("ModalController", function($location, $state, $scope, $filter, $modalInstance) {
	  $scope.cancel = function () {
            $modalInstance.dismiss('cancel');    
            $state.go('index');
        };
    
        
         $scope.done = function (isValid) {
            if (isValid) {
                $modalInstance.close();
            }
            else {
                return false;
            }
        };
});

app.factory('ApiFactory', function ($http) {
    var factory = {};

   
    return factory;
});

app.factory("myService",[ "$state", "$modal", "ApiFactory",
    function ($state, $modal, factory) {
			 var service = {
      		openModal: openModal
       };
       
       function openModal (data) {
             var uData = null;
            if (data) {
                uData = {
                    userName : data.setName,
                    gender : data.gender
                }
            }
            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
              	controller: 'ModalController',
              	backdrop: 'static',
              	keyboard: false,
                resolve: {
                    data: function () {
                        return uData;
                    }
                }
            });

            modalInstance.result.then(function () {
                return;
            }, function () {
               
                });
            return modalInstance;

         
      }
      
      return service;
    }
]);  

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  ...