When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle when placed outside of the view, on the home page. Below is the code snippet provided:
Home.html
<html ng-app='cgpaApp'>
<head>
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/error.css" />
<link rel="stylesheet" type="text/css" href="/styles/bootstrap-toggle.min.css"/>
</head>
<body>
... (omitted for brevity)
Working Checkbox Toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No">
<main>
<ng-view></ng-view>
</main>
... (additional script references)
</body>
</html>
app.js
(function () {
var app = angular.module('cgpaApp',['ngRoute','ngAnimate','ngMessages']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
controller: 'cgpaController',
templateUrl:'/app/views/cgpacalculate.html'
})
.otherwise({ redirectTo:'/'});
});
})();
cgpacalculate.html
<div>
Not Working Checkbox Toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
.....some code
The issue at hand is that the checkbox inside cgpacalculate.html appears as a normal checkbox while the checkbox within Home.html displays correctly as a bootstrap toggle element.
What could have been overlooked in this scenario?