Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">
    <form name="myForm.form" novalidate="" class="form-group">
      <input type="text" ng-model="abc" id="abc" name="abc" 
      class="form-control" style="width:80%;margin-top:20px"/>
      <span>Form dirty: {{ myForm.form.abc.$dirty }}</span>
      <button type="button" class="btn btn-primary" ng-click="save(abc)">Save</button>
    </form>
  </body>

</html>

// Code goes here

angular.module('myApp',['ui.bootstrap'])
.controller('myController',['$scope','$window','$modal','$log',
function($scope,$window,$modal,$log){
  $scope.myForm = {};
  $scope.abc = '';
  // FOLLOWING WITH OPEN NATIVE BROWSER'S ALERT
  /*$window.onbeforeunload = function(event) {
      if ($scope.myForm.form.$dirty) {
          event = $window.event;
          if (event) {
              event.returnValue = 'There are some unsaved changes. Sure you want to leave?';
          }
          return 'There are some unsaved changes. Sure you want to leave?';
      }
  };*/
  $scope.items = ['item1', 'item2', 'item3'];
  $scope.$on('$locationChangeStart', function( event ) {
    var answer = confirm("Are you sure you want to leave this page?")
    if (!answer) {
        event.preventDefault();
    }
});
  /*$scope.$on('$locationChangeStart', function(event) {
      // if modal instance difined, dismiss window
      if ($scope.modalInstance) {
          $scope.modalInstance.close('cancel');
      }

      if($scope.myForm.form.$dirty){
          event.preventDefault();

          $scope.modalInstance = $modal.open({ templateUrl: 'modalg.html', backdrop: 'static' });
          $scope.modalInstance.result.then(function() {
              if($scope.toAdminScreen === true)
                  $location.path('/ui/admin');
              else if($scope.toHomeScreen === true){
                  $avaValuationService.avaPartOutModel.engineSerialNumber = '';
                  $location.path('/ui/ava-home');
              }
              else
                  $window.history.back();
              // SET ALL FORMS TO PRISTINE STATE
              $scope.renameValuationForm.renameValuationForm.$setPristine(true);
              $scope.engineInfoForm.engineInfoForm.$setPristine(true);
              $scope.valuationNameForm.valuationNameForm.$setPristine(true);
              $scope.valuationForm.valuationForm.$setPristine(true);

              return true;
          });
      }
  });*/
  
  
  $scope.save = function(model){
    console.log(model);
  };
}]).controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

/* Styles go here */

<div>
  <div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body">
      <ul>
          <li ng-repeat="item in items">
              <a ng-click="selected.item = item">{{ item }}</a>
          </li>
      </ul>
      Selected: <b>{{ selected.item }}</b>
  </div>
  <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</div>