Angularjs ng-view does not display the Page

I am new to angularjs,i am working on angularjs Routing using ngRoute.

MasterPage.HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Script/JS/jquery-3.1.0.min.js"></script>
    <script src="Script/JS/bootstrap.min.js"></script>
    <script src="Script/Angular/angular.min.js"></script>
    <script src="Script/Angular/angular-route.min.js"></script> 
    <script src="Js/app.js"></script>       

</head>
<body ng-app="angualarModule">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" style="text-indent: 3em" href="#">
                    Dairy Management
                </a>
                <ul class="nav">
                    <li class="active"><a href="#/Home">Home</a></li>
                    <li><a href="#/Product">Product Master</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Customer Master                    
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/CustomerMaster">Customer Master</a></li>
                            <li class="divider"></li>
                            <li><a href="#/CustomerRate">Customer Rate Master</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Distributer Master                    
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/DistributerMaster">Distributer Master</a></li>
                            <li class="divider"></li>
                            <li><a href="#/DistributerRate">Distributer Rate Master</a></li>
                        </ul>
                    </li>
                </ul>
                <a class="btn" href="#" style="float:right;">
                    Logout
                </a>
            </div>
        </div>
    </div>
    <div ng-view></div>
</body>
</html>

app.js

var angualarModule = angular.module("angualarModule", ['ngRoute']);

angualarModule.config(function ($routeProvider) {  
    $routeProvider.
    when('/Product', {
        templateUrl: 'Templates/ProductMaster.html'
    });   

});

ProductMaster.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Script/JS/jquery-3.1.0.min.js"></script>
    <script src="../Script/Angular/angular.min.js"></script>
    <script src="../Js/app.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert('HI');
        });
    </script>
</head>
<body ng-app="angualarModule">
    <h1>Product Master</h1>
</body>
</html>

When i click on ProductMaster link the page is not displayed in ng-view.
There are no errors in console.
In fact alert('HI') is also getting called which is present in ProductMaster.html page.

But ng-view does not display the required page.

Thanks......

Solution

The code inside ProductMaster.html is unnecessary, except <h1>Product Master</h1>.

ProductMaster template is just a part of your already included MasterPage.html, and hence having inside another would be redundant.

So, your MasterPage.html should only contain <h1>Product Master</h1>, not the complete html. And it should work. [Supporting Plunk - http://plnkr.co/edit/hvle5ceu9n4cOVPugbdm?p=preview]

Also, make sure if you're using Bootstrap's JS, your jQ version should be less than 3.