AngularJS Disable & Renable Routing

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

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body class="container" ng-controller="MainCtrl">
    <ul class="nav">
      <li ng-class="{disabled: menuDeactivated}"><a href="#/default">Go to <strong>Default</strong> Page</a></li>
      <li ng-class="{disabled: menuDeactivated}"><a href="#/test">Go to <strong>Test</strong> Page</a></li>
    </ul>
    <h2>Enable/Disable Menu Links in AngularJS</h2>
    <p>This demo uses the <code>$locationChangeStart</code> event to intercept any location changes in the application.  If menuDeactivated is set to true on the $rootScope, it simply uses event.PreventDefault() to cancel the location change.</p>
    <p class="well well-sm">When menuDeactivated is set to true, all location changes are prevented.  <strong>This includes all links on the page used for routing in your application.</strong> For example, if you click the Disable Navigation button, this link to the <a href="#/default"><strong>default</strong></a> page and this link to the <a href="#/test"><strong>test</strong></a> page won't work. Other links (e.g., to external pages) and click events that don't affect the location will be unaffected.</p>
    <button class="btn" ng-click="toggleMenu()" ng-class="{'btn-danger': !menuDeactivated, 'btn-success': menuDeactivated}">{{menuDeactivated ? 'Enable' : 'Disable'}} Navigation</button>
    <div ng-view></div>
    
    <!--Partials-->
    <script type="text/ng-template" id="test.html">
      <h1>Contents for test.html</h1>
    </script>
    <script type="text/ng-template" id="default.html">
      <h1>Contents for default.html</h1>
    </script>  
    <!--/Partials-->    
  </body>

</html>

var app = angular.module('demo', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/test',{
        templateUrl: "test.html",
    })
    .when('/default',{
        templateUrl: "default.html",
    })
    .otherwise({
        redirectTo: '/default'
    });
}]);

app.run(function ($rootScope, $location) {
  $rootScope.$on('$locationChangeStart', function (event, next, current) {
    if ($rootScope.menuDeactivated) {
      event.preventDefault();
      alert('Sorry this link is currently disabled.');
    }
  });
});

app.controller('MainCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
  $scope.toggleMenu = function() {
    $rootScope.menuDeactivated = !$rootScope.menuDeactivated;
  };
}]);

.nav {
 height: 40px;
 border-bottom: 1px solid #555;
 background-color: #ccc;
 margin: 0 -15px;
}
.nav>li {
  float: left;
  border-right: 1px solid #555;
}

Answer for stackoverflow [question](http://stackoverflow.com/questions/30612758/how-to-enable-click-functionality-of-div-in-javascript-or-jquery/30615703#30615703)