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?

by aman1981

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. I think you like it.
  </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">
    
    </div>
    <div class="modal-footer">
    <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" type="button" ng-click="">Done</button>
</div>
  </script>

  <ui-view> </ui-view>
</div>

CSS

body {
    padding: 5px;
}

JavaScript

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

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

app.controller("AboutController", function($location, $state, $scope, $filter, $modal) {
   var modalInstance = $modal.open({
    templateUrl: 'modal.html',
    controller: 'ModalController',
    backdrop: 'static',
    keyboard: false
  });

  modalInstance.result.then(function() {
    // Success, do nothing
  }, function() {
    $state.go('index');
  });

});

app.controller("ModalController", function($location, $state, $scope, $filter, $modalInstance) {
	  $scope.cancel = function () {
            $modalInstance.dismiss('cancel');           
        };
});

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.otherwise('/index');
  $stateProvider
    .state('index', {
      url: '^/index',
      templateUrl: 'index.html',
      controller: "IndexController"
    })
    .state('about', {
      url: '^/about',
      templateUrl: 'about.html',
      controller: "AboutController"
    })
}]);