AngularJs controller not getting called when a link is clicked

Question

Currently, I'm working on an initial AngularJs app for an Admin Console for a database. I'm pretty new at Angular, so I've started off by modifying the phonecat tutorial. Basically, I've got a Jersey REST API that I need to make calls against in Angular. CORS is not the problem, they're both running on the same Tomcat.

The data structure is Projects have Groups within them.

I can redirect from Login to the Projects list page, the controller for getting the list of projects is called, and I can click a project and get the details page and its controller is called. But when I click a link from the project-details page and have it redirect to the groups-list page, the REST api call is never made (according to Chrome's network monitor.)

I'm rather confused because hypothetically it should be the exact same as the projects list.

Controllers:

phonecatControllers.controller('ProjectListCtrl', ['$scope', '$http',function($scope, $http){

$http.get('http://localhost:8080/WrappingServer/rest/api/project?show_hidden=true').success(function(data){
    $scope.projects = data.hits.hits

});
$scope.orderprop='timeModified';
}]);

phonecatControllers.controller('GroupListCtrl', ['$scope', '$http',function($scope, $http){

$http.get('http://localhost:8080/WrappingServer/rest/api/group?projectID='+$scope.project._id+'&show_hidden=true').success(function(data){
    $scope.groups = data.hits.hits //Yes this is correct. It's an elasticsearch cluster.

});
$scope.orderprop='timeModified';
}]);

phonecatControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams' ,'$http', function($scope, $routeParams, $http){
$http.get('http://localhost:8080/WrappingServer/rest/api/project/'+$routeParams.projectId).success(function(data){
    $scope.project=data;

});

}]);

project-details.html:

<img ng-src="{{project._source.imageUrl}}" class="project">
<h1>{{project._source.name}}</h1>
<p>{{project._id}}</p>
<ul class="specs">
    <a ng-href="#/groups" ng-click=>Group IDs</a>
     <dd ng-repeat="group in project._source.groupIDs"><a href="#/projects/{{proj._id}}">{{proj._source.name}}</a>
    {{group.groupID}}
    </dd>
  </ul>

group-list.html

  <div class="container-fluid">
          <div class="row">
            <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="query">
      Sort by:
<select ng-model="orderprop">
  <option value="name">Alphabetical</option>
  <option value="dateModified">Newest</option>
</select>

    </div>
    <div class="col-md-10">

      <!--Body content-->

      <ul class='groups'>
<li ng-repeat="group in groups | filter:query | orderBy:orderprop" class="thumbnail">
<a href="#/groups/{{group._id}}" class="thumb"><img ng-src="    {{group._source.imageUrl}}" alt="{{group._source.name}}"></a>
            <a href="#/groups/{{group._id}}">{{group._source.name}}</a>
            <p>{{group._source.timeModified}}</p>
</li>
</ul>


    </div>
  </div>
</div>

app.js

'use strict';

/* App Module */

var phonecatApp= angular.module('phonecatApp', [
    'ngRoute', 'phonecatControllers', 'phonecatFilters']



);

phonecatApp.config(['$routeProvider',
    function($routeProvider){
        $routeProvider.when('/projects', 
        {
            templateUrl: 'partials/project-list.html',
            controller: 'ProjectListCtrl'
        }).when('/projects/:projectId', {
            templateUrl: 'partials/project-detail.html',
            controller: 'ProjectDetailCtrl'
        }).when('/home', {
            templateUrl: 'partials/login.html',
            controller: 'LoginCtrl'
        }).when('/groups',
        {
            templateUrl: 'partials/group-list.html',
            controller: 'GroupListCtrl'
        })




        .otherwise({
            redirectTo: '/home'
        });
        }]);

I've even tried to take an approach where the projectID is a routeParam (kind of like for Project details), but still no luck.

Let me know if you anything else to answer my question. I know it's going to be something so stupidly simple that a handprint will appear on my forehead. (From what I've seen, possibly a space where it's not supposed to be.)

Thanks!

Answer 1

You have:

phonecatControllers.controller('GroupListCtrl', ['$scope', '$http',function($scope, $http){
  $http.get('http://localhost:8080/WrappingServer/rest/api/group?projectID='+$scope.project._id+'&show_hidden=true').success(function(data){
    $scope.groups = data.hits.hits //Yes this is correct. It's an elasticsearch cluster.
  });
  $scope.orderprop='timeModified';
}]);

I would instead do this in your controller:

phonecatControllers.controller('GroupListCtrl', ['$scope', '$http',function($scope, $http) {

  $scope.function_name = function() {
    $http.get('http://localhost:8080/WrappingServer/rest/api/group?projectID='+$scope.project._id+'&show_hidden=true').success(function(data){
      $scope.groups = data.hits.hits //Yes this is correct. It's an elasticsearch cluster.
    });
  }

  $scope.orderprop='timeModified';

}]);

For your link that is within the HTML element possessed by the controller,

<a ng-href="/groups" ng-click="function_name()">Group IDs</a>

As it is, your AJAX call is just sitting there. You need to place it within a block where code is executed for it to be called, just like in any other case. In this case, you must place it within a function that serves as a callback tied to ng-click.

Answer 2

<a href="#/groups/{{group._id}}" class="thumb"> should be <a ng-href="/groups/{{group._id}}" class="thumb">

Also <a ng-href="#/groups" ng-click=>Group IDs</a should not have an empty ngClick on it. It should look like <a ng-href="/groups">.

So basically just change the attribute of the link from href to ng-href and then remove the # symbol from the link.