(function() {
var app = angular.module('cgpaApp', ['ngRoute', 'ngAnimate', 'ngMessages']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'cgpacalculate.html',
controller: 'appChkController',
})
.otherwise({
redirectTo: '/about'
});
});
app.controller("appChkController", ['$scope', function($scope) {
$('#toggle-one').bootstrapToggle();
}]);
})();
<html ng-app='cgpaApp'>
<head>
<link data-require="bootstrap-css" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="angular.js@1.4.xanimate" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js" data-semver="1.4.9"></script>
<script data-require="angular.js@1.4.xMsg" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-messages.js" data-semver="1.4.9"></script>
<script data-require="angularRoute@14" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js" ></script>
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CGPA Calculator</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>
<li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
</ul>
</div>
</nav>
</header>
Working Checkbox toggle:
<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No">
<main>
<ng-view></ng-view>
</main>
</body>
</html>
/* Put your css in here */
<div>
Not Working Checkbox toggle:<input id="toggle-one" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
bootstraptoggle demostration