AngularJS - HTML page does not show returned data when using ngView

I am new to AngularJS.

I have a php server with sql database, and I have an html page with AngularJS and a button that sends an $http get request to the server, which returns an array of data that is displayed in a table on the same page.

Whenever I open the page directly websitename/myList.htm and I press the getList, the data gets displayed perfectly without any issues, but once I open the page through routing, ngView, the page elements appear but if I press the button, the page does not get updated with the data from the server.

Is there an additional data link needed between the two pages?

myList.htm

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<script>
angular.module("crudApp", [])
.controller("userController", function($scope,$http){
$scope.users = [];
$scope.tempUserData = {};
// function to get records from the database

$scope.getList = function(){
$http.get('action.php', {
params:{
'type':'getList'
        }
    }).success(function(response){
        if(response.status == 'OK'){
            $scope.users = response.records;
        }
    });
};


});

</script>


<body ng-app="crudApp">
<div class="container" ng-controller="userController">

<a href="javascript:void(0);" class="btn btn-success"     ng-click="getList()">getList</a>


        <table class="table table-striped">
            <tr>
                <th width="20%">Name</th>
                <th width="30%">Email</th>
                <th width="20%">Phone</th>
            </tr>
            <tr ng-repeat="user in users">
                <td>{{user.Name}}</td>
                <td>{{user.Email}}</td>
                <td>{{user.Phone}}</td>
            </tr>
        </table>

<p>end of table</p>
</body>

</html>

page with routes:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/">Main</a></p>
<a href="#list">List</a>



<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
    templateUrl : "main.htm"
})
.when("/list", {
    templateUrl : "myList.htm"
});
});
</script>

<p>Click on the links to navigate</p>
</body>
</html>

Thank you.

Solution

You need the same .module name for your controller and your app.js, such as;

var app = angular.module("myApp", ["ngRoute"]);
angular.module("myApp", []).controller("userController"

The reason yours didn't work via ng-route was because you were loading "myApp" on the first instance, then using your ng-view to load the HTML page which would work, but because your module wasn't added as a dependency onto your controller, it wouldn't load the controller because it was looking explicitly for controllers that use "myApp", it loaded via the direct route because you never told it to explicitly use "myApp".

You also need #/list for your href tag.

You also only need to reference your angular scripts once for your index.html, as it pertains throughout the application, because when you load the "myList.htm" you'd be loading a duplicate of those scripts within the ng-view tags. This works if "main.htm" gets loaded first instead of the default "index.html", your routes will work fine even when going directly to localhost:portnum/#/list.

Also you should reference your controller scripts on your "main.htm", this ensures that they get loaded for use within ng-view, for larger pages, you'd reference the scripts on the bottom of the page such as;

<script src="scripts/app.js"></script>
<script src="scripts/controller"><script>

With the file path being relevant to the current project directory.

Hope it helps!