<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div ng-controller='mainCtrl'>
    <ul>
      <li ng-click=filter='ab'><a href='#'>filter none</a></li>
      <li ng-click="filter='a'"><a href='#'>filter A</a></li>
      <li ng-click="filter='b'"><a href="#">filter B</a></li>
    </ul>

      <div ng-repeat='item in list | filter:myFilterFn'>
        <div>
            Item of type {{item.type}} and the item name is: {{item.name}}
            <my-dir></my-dir>
        </div>
      </div>
    </div>
  </body>

</html>
// Code goes here
var app = angular.module('app',[]);

app.directive('myDir',function(){
  return{
    replace:true,
    restrict:'E',
    templateUrl:'myDir.html',
    scope:{},
  };
});

app.controller('mainCtrl',function($scope){
  $scope.filter = 'ab';
  $scope.list=[
    {type:'a',name:'item no. 1'},
    {type:'a',name:'item no. 2'},
    {type:'b',name:'item no. 3'},
    {type:'a',name:'item no. 4'},
    {type:'b',name:'item no. 5'},
    {type:'a',name:'item no. 6'}
    ];
    
    $scope.myFilterFn = function(item){
      return $scope.filter.indexOf(item.type) !== -1;
    };
});
/* Styles go here */

<div ng-if="true">
  inner dirctive
</div>