Angular routing with ngRoute doesn't work - angularjs

Question

I'm new to Angular and I'm trying to create a Single Page application with 2 views.
When I load the app is always shows me the first one of the 2 views regardless of what route I type in the browser.
This is the javascript code:
var appControllers = angular.module('appControllers', []);
appControllers.controller('HomeController', function($scope, $http) {
var promise = $http({
method: 'GET',
url: 'restaurant.json'
});
promise.then(function(obj) {
$scope.data = obj.data;
});
});
appControllers.controller('InformationController', function($scope, $http) {
var promise = $http({
method: 'GET',
url: 'restaurant.json'
});
promise.then(function(obj) {
$scope.data = obj.data;
});
});
var app = angular.module('myApp', ['ngRoute', 'appControllers']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/productlist.html',
controller: 'HomeController'
}).
when('/info', {
templateUrl: 'partials/information.html',
controller: 'InformationController'
})
}]);
app.controller('HomeController', function($scope, $http) {
var promise = $http({
method: 'GET',
url: 'restaurant.json'
});
promise.then(function(obj) {
$scope.data = obj.data;
});
});
app.controller('InformationController', function($scope, $http) {
var promise = $http({
method: 'GET',
url: 'restaurant.json'
});
promise.then(function(obj) {
$scope.data = obj.data;
});
});
I tried to change the order in which I define the 2 routes for the 2 view templates.
If I define the info template first the that template will be shown always and the other one will not be shown.
Can someone help me fix this problem?

Answer 1

Here is a fully functioning ngRoute:
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'templates/a.html',
controller: 'a'
}).
when('/av2', {
templateUrl: 'templates/av2.html',
controller: 'av2',
}).
when('/a3', {
templateUrl: 'templates/a3.html',
controller: 'a3'
}).
otherwise({
redirectTo: '/a'
});
}]);
Try cross comparing that with your code and see if you find any differences. I think it may have to do with how you initiate your app very late into the script:
var app = angular.module('myApp', ['ngRoute', 'appControllers']);
Typically, bootstrapping your app is one of the most important things to do and should be at the top as a result.