XML Parsing Error: junk after document element in AngularJS - angularjs

Question

I am working with Angular JS and created a simple login form and also implemented routing to route to next page after successful login.
But when I am trying to implement conditional routing, after login I am able to route to next page in my app but the page contents are not being displayed.
Below shown is my application structure.
I have created a controller.js file , a login.html and dashboard.html files
controller.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : "login.html"
})
.when('/dashboard', {
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
} else{
templateUrl : "dashboard.html"
}
}
}
})
.otherwise({
redirectTo : '/'
});
});
app.controller('loginCtrl', function($scope ,$location , $rootScope) {
$scope.submit = function(){
if($scope.username == 'asd' && $scope.password == 'asd' ){
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else
{
alert("Invalid username and password")
}
};
});
login.html:
<div class="col-sm-8 col-sm-push-4">
</div>
<div class="col-sm-4 col-sm-pull-4">
<div ng-controller="loginCtrl">
<br><br><br><br><br><br>
<h3>Login </h3><hr>
<form action="/" id="myLogin">
<div class="form-group">
<label for="username">UserName:</label>
<input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="button" class="btn btn-default" ng-click="submit()">Login</button>
</form>
</div>
</div>
dashboard.html:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MY APP</a>
</div>
</div>
</nav>
<br/>
<nav class="navbar navbar-inverse" style="margin: auto;">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
This is my output window
can anybody help me in resolving this error...!

Answer 1

Try:
.when('/dashboard', {
templateUrl: 'dashboard.html',
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
}
}
}
})
Here is the working plunkr
Few other points to consider in your code:
use controller name in config phase itself rather than writing inside html as ng-controller
Ex:
.when('/', {
templateUrl : "login.html",
controller : 'loginCtrl'
})
Remove action from <form> tag because you are handling via angularJS & use ng-submit.
ex:
<form id="myLogin" ng-submit="submit()">
Remove $rootScope.loggedIn, as rootScope variables are discouraged, rather use factories