Tab filtering with angular

Question

I am taking a long overdue Angular workshop and I am trying to convert a page from regular JQuery to Angular functionality. One of the things I am stuck on is activating a filter with ng-click (at least I think that is the preferred method).

So basically I have a gallery and a menu on the left with the categories(groups) of these images in the gallery. The groups show according to the menu on the left. So, 4 groups (Girls, Nature, Music, Space). The images are divided into these groups. If I press on girls, I should see only the images in the group:girls, if I press nature, I should see only the pictures in group:nature and so on, If I press All, I should see them all.

Well, it's not working. Even though I followed this How to filter a list in AngularJS using several links.

Here is a visual of the page to give an idea

And here is my code

HTML

<div class="content-body" ng-controller="galleryController as panel">
  <div class="col-xs-12 col-md-3">
    <div class="content-sidebar">
      <div class="side-widget menu">
        <h4>Groups:</h4>
        <div class="border-bottom">
          <ul ng-init="tab = 1" class="list-group">
            <li ng-class="{active:panel.isSelected(1)}">
              <a class="list-group-item" ng-click="panel.selectTab(1); groupFilter = {}">All <span
                                            class="badge badge-primary">12</span></a>
            </li>
            <li ng-class="{active:panel.isSelected(2)}">
              <a class="list-group-item" ng-click="panel.selectTab(2); groupFilter ={group:'nature'}">Nature <span
                                                class="badge badge-success">7</span></a>
            </li>
            <li ng-class="{active:panel.isSelected(3)}">
              <a class="list-group-item" ng-click="panel.selectTab(3)">Music <span
                                                class="badge badge-danger">3</span></a>
            </li>
            <li ng-class="{active:panel.isSelected(4)}">
              <a class="list-group-item" ng-click="panel.selectTab(4)">Space <span
                                                class="badge badge-info">2</span></a>
            </li>
            <li ng-class="{active:panel.isSelected(5)}">
              <a class="list-group-item" ng-click="panel.selectTab(5)">Girls <span
                                                class="badge badge-warning">3</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-9">
    <div class="gallery">
      <div>
        <div class="col-xs-12 col-md-3" ng-repeat="gallery in galleries | filter:groupFilter">
            <a class="gallery-item" ng-href="{{gallery.img}}" ng-class="{true:'active',false:''}[checked]"
               title="Nature Image 1" >
                <div class="image">
                    <img ng-src="{{gallery.img}}" alt="Nature Image 1"/>

                </div>
                <div class="meta">
                    <strong>{{gallery.title}}</strong>
                    <span>{{gallery.desc}}</span>
                </div>
            </a>
            <ul class="gallery-item-controls">
                <li><label class="check"><input type="checkbox" class="icheckbox" ng-model="checked" /></label></li>
                <li><span class="gallery-item-remove"><i class="fa fa-times" ng-click="removeGalleryItem(galleryItem, $event)"></i></span></li>
            </ul>
        </div>
      </div>
    </div>
  </div>
</div>

The Controller if you need to see it

app.controller('galleryController', ['$scope', '$http', function($scope, $http) {
    $http.get('data/galleries.json').success(function(data){
        $scope.galleries = data;
    });

    $scope.removeGalleryItem=function(gallery){
        var removedGallery = $scope.galleries.indexOf(gallery);
        $scope.galleries.splice(removedGallery, 1);
    };

    this.tab = 1;

    this.selectTab = function(setTab){
        this.tab = setTab;
    };

    this.isSelected = function(checkTab){
        return this.tab === checkTab;
    };



}]);

The Data

[
{
  "img":"assets/images/gallery/girls-1.jpg",
  "group": "girls",
  "title": "Image 1",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/girls-2.jpg",
  "group": "girls",
  "title": "Image 2",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/girls-3.jpg",
  "group": "girls",
  "title": "Image 3",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-1.jpg",
  "group": "music",
  "title": "Image 4",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-2.jpg",
  "group": "music",
  "title": "Image 5",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-3.jpg",
  "group": "music",
  "title": "Image 6",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-4.jpg",
  "group": "music",
  "title": "Image 7",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-5.jpg",
  "group": "music",
  "title": "Image 8",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-1.jpg",
  "group": "nature",
  "title": "Image 9",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-2.jpg",
  "group": "nature",
  "title": "Image 10",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-3.jpg",
  "group": "nature",
  "title": "Image 11",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-4.jpg",
  "group": "nature",
  "title": "Image 12",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-5.jpg",
  "group": "nature",
  "title": "Image 13",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-6.jpg",
  "group": "nature",
  "title": "Image 14",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-7.jpg",
  "group": "nature",
  "title": "Image 15",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/space-1.jpg",
  "group": "space",
  "title": "Image 16",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/space-2.jpg",
  "group": "space",
  "title": "Image 17",
  "desc": "Description",
  "link":""
}
]

Just in case you're wondering what is in the controller. A remove gallery item that is not workig either, but that's for another question. And a couple of functions to add the active class to the menu so that it shows when it is active.

According to the tutorial above, there is nothing needed in the controller to make the filtering work because it is all included in Angular out of the box.

EDIT
Any ideas how to make this filetering work with the data separated from the app.js file.

Here's a link for a codepen. As you can see it works if I put the data in the apps file but not when I remote to it (as it should be) Do I need to build a factory? Comment out the data in the app.js and leave the remote to a repo that contains the json and images and see it fail

Answer 1

At the request of the OP I am adding an answer here that is similar to one that I wrote for another of their questions.

Note to OP - maybe edit it so future readers aren't confused :-)

---

After doing some research I think the problem is that galleryController is defined somewhere in your markup but the elements in the gallery are not inside of where that controller is defined.

Referring to http://joli.sitedev.online/#/gallery. In file slidesController.js where galleryController is defined I put a break here and the code pauses:

I also put a break point here but the code does not pause when clicking on a delete button:

Looking at the markup I can't see any sign of ng-controller="galleryController" so I can't see how galleries in the ng-repeat is populated:

Maybe it is through this:

If it is through that then it would explain things as that directive has its own controller. Any further information would help and I'm sure we can clear this up.