带角度的选项卡过滤

我正在采取一个早该过期的Angular研讨会，并试图将常规JQuery的页面转换为Angular功能。我坚持的一件事是用ng-click激活一个过滤器（至少我认为这是首选方法）。带角度的选项卡过滤

所以基本上我有一个画廊和一个菜单左侧的图库中的这些图像的类别（组）。小组根据左边的菜单显示。所以，4组（女孩，自然，音乐，空间）。图像被分成这些组。如果我按下女孩，我应该只看到小组中的图像：女孩，如果我按大自然，我只能看到群组中的照片：大自然等，如果我按全部，我应该看到他们。

嗯，它不工作。尽管我遵循这个How to filter a list in AngularJS using several links。

这里是一个可视化的页面给一个想法

这里是我的代码

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>

的控制器，如果你需要看到它

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; 
    }; 



}]);

的数据

[ 
{ 
    "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":"" 
} 
]

以防万一你想知道什么是在控制器中。一个删除画廊项目也不工作，但这是另一个问题。还有一些功能可以将活动类添加到菜单中，以便显示它何时处于活动状态。

根据上面的教程，控制器中没有任何东西需要过滤工作，因为它全部包含在Angular中。

编辑
任何想法如何使从app.js文件中分离数据这filetering工作。

这是一个码簿的link。正如你可以看到它的工作原理，如果我把数据放在应用程序文件中，但不是当我远程它（因为它应该是）我需要建立一个工厂？在app.js注释掉数据和远程离开到包含JSON和图像的回购，看到它失败