Angular(V1.5.3) filters

Question

I'm currently working a page where I want there to be two pieces of information, an array of Sectors which when clicked on a particular sector it will filter the list below it in terms of the projects associated with it.

I'm trying to achieve this by filtering down the items use $filter service in Angular. But for some reason, nothing is happening at all when I click the appropriate sector. It just remains the same.

Here is an image (a very basic layout) just to show you: Trying to filter a list.

I don't have any errors in my console, I think it might be the null value on my controller but I'm not certain, any help would be appreciated.

Here are my arrays which are in my controller (for now...) along with a public function and scope variable to be used in the html:

$scope.sectors = [
{"id": 0, "name": "Branding", "image": "assets/01_WORK_TILE.jpg"},
{"id": 1, "name": "Retail Design", "image": "assets/WORK_RETAILDESIGN.jpg"},
{"id": 2, "name": "Food & Beverage Design", "image": "assets/WORK_F&B.jpg"},
{"id": 3, "name": "Graphic Communication", "image": "assets/06_WORK_TILE.jpg"},
{"id": 4, "name": "Masterplanning", "image": "assets/WORK_MASTERPLANNING.jpg"},
{"id": 5, "name": "Public Spaces", "image": "assets/WORK_PUBLICSPACES.jpg"},
{"id": 6, "name": "Strategic Insights", "image": "assets/WORK_STRATEGICINSIGHTS.jpg"},
{"id": 7, "name": "Signage & Wayfinding", "image": "./assets/WORK_SIGNAGE&WAYFINDING.jpg"}

];

$scope.projects = [
{"id": 0, "name": "UK Coffee week", "image": "cw-avatar", "desc": "Using coffee to do good!", "sector": "Branding"},
{"id": 1, "name": "Lexicon", "image": "lexicon-avatar", "desc": "Transforming a Town.", "sector": "Branding"},
{"id": 2, "name": "Ajmal", "image": "ajmal-avatar", "desc": "Fragrance for everyone.", "sector": "Retail Design"},
{"id": 3, "name": "Aelia", "image": "aelia-avatar", "desc": "A World first for travel retail.", "sector": "Retail Design"},
{"id": 4, "name": "Amuse", "image": "amuse-avatar", "desc": "Developing a World of beauty.", "sector": "Retail Design"},
{"id": 5, "name": "Johnnie Walker", "image": "jwalker-avatar", "desc": "A new arrival at Amsterdam Airport.", "sector": "Food & Beverage Design"},
{"id": 6, "name": "Fine Foods", "image": "finefoods-avatar", "desc": "?", "sector": "Graphic Communication"},
{"id": 7, "name": "Nice Duty Free", "image": "nice-avatar", "desc": "?", "sector": "Graphic Communication"},
{"id": 8, "name": "Al Maryah Island", "image": "maryah-avatar", "desc": "?", "sector": "Signage & Wayfinding"},
{"id": 9, "name": "British Land", "image": "britishland-avatar", "desc": "Superior signage and wayfinding.", "sector": "Signage & Wayfinding"}

];

$scope.currentSector = null;

function setCurrentSector(sector) {
$scope.currentSector = sector;
}

$scope.setCurrentSector = setCurrentSector;

And here is the markup in my view file:

<div layout="column" flex>
    <ul ng-controller="WorkController" ng-repeat="sector in sectors">
        <li style="list-style: none; font-family: portland-bold-font;">
            <a ng-click="setCurrentSector(sector);">{{ sector.name }}</a>
        </li>
    </ul>
</div>

<div class="animation-element slide-up" style="font-size: 0;">
    <p style="height: 25%; text-align: center; background: black; font-family: portland-bold-font; color: white; margin: 0; padding: 0%; font-size: 2.5vw;" ng-cloak>
    Lorem ipsum dolor sit amet, consectetur<br /> adipisicing elit, sed do eiusmod tempor<br /> incididunt ut labore et dolore
    </p>
</div>

<div layout="column" style="background:white;">
    <ul ng-controller="WorkController" ng-repeat="project in projects | filter:currentSector.name">
        <li style="list-style: none; font-family: portland-bold-font;">{{ project.name }}</li>
    </ul>
</div>

Answer 1

Look this plunker : https://plnkr.co/edit/fwXN2YjR84iOfp5wuQO1?p=preview

As I said in comment you declare twice ng-controller in two different parts of dom. In angular controller are not share like service so you had two different controller and your var sector was not "see" by your filter.

I encapsulate DOM into body and declare controller on body :

<body ng-controller="MainCtrl">
  ...
</body>