var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Select a pole:';
  /*this.choosenDepartment = undefined;*/
  this.departmentList = [{
    "id": undefined,
    "label": "All",
    "code": "All"
  },{
    "id": 1,
    "label": "Direction",
    "code": "DIR"
  }, {
    "id": 6,
    "label": "Pôle commercial",
    "code": "COM"
  }, {
    "id": 5,
    "label": "Pôle communication/marketing",
    "code": "MAR"
  }, {
    "id": 3,
    "label": "Pôle ingénierie logicielle",
    "code": "ING"
  }, {
    "id": 4,
    "label": "Pôle web",
    "code": "WEB"
  }, {
    "id": 2,
    "label": "Service des ressources humaines",
    "code": "RH"
  }];
  this.departmentTmp = [{
    "id": 9,
    "username": "alexandra.bauchart",
    "lastName": "Bauchart",
    "firstName": "Alexandra",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 2,
      "label": "ROLE_AGENT",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 5,
      "label": "Pôle communication/marketing",
      "code": "MAR"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Alexandra Bauchart",
    "abregate": "AB"
  }, {
    "id": 4,
    "username": "alexandre.bay",
    "lastName": "Bay",
    "firstName": "Alexandre",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 2,
      "label": "ROLE_AGENT",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 3,
      "label": "Pôle ingénierie logicielle",
      "code": "ING"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Alexandre Bay",
    "abregate": "AB"
  }, {
    "id": 2,
    "username": "benjamin.ruef",
    "lastName": "Ruef",
    "firstName": "Benjamin",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 2,
      "label": "ROLE_AGENT",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 3,
      "label": "Pôle ingénierie logicielle",
      "code": "ING"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Benjamin Ruef",
    "abregate": "BR"
  }, {
    "id": 7,
    "username": "corentin.dauvier",
    "lastName": "Dauvier",
    "firstName": "Corentin",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 2,
      "label": "ROLE_AGENT",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 3,
      "label": "Pôle ingénierie logicielle",
      "code": "ING"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Corentin Dauvier",
    "abregate": "CD"
  }, {
    "id": 6,
    "username": "dorothee.wenehoua",
    "lastName": "Wenehoua",
    "firstName": "Dorothee",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 7,
      "label": "ROLE_RH",
      "canRegulateCounter": true,
      "canSeeRequestAttachFile": true
    }],
    "department": {
      "id": 2,
      "label": "Service des ressources humaines",
      "code": "RH"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Dorothee Wenehoua",
    "abregate": "DW"
  }, {
    "id": 3,
    "username": "florian.gourmelen",
    "lastName": "Gourmelen",
    "firstName": "Florian",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 3,
      "label": "ROLE_RESP",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 3,
      "label": "Pôle ingénierie logicielle",
      "code": "ING"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Florian Gourmelen",
    "abregate": "FG"
  }, {
    "id": 5,
    "username": "hatem.bellagi",
    "lastName": "Bellagi",
    "firstName": "Hatem",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 6,
      "label": "ROLE_DIR",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 1,
      "label": "Direction",
      "code": "DIR"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Hatem Bellagi",
    "abregate": "HB"
  }, {
    "id": 8,
    "username": "richard.ratiman",
    "lastName": "Ratiman",
    "firstName": "Richard",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 3,
      "label": "ROLE_RESP",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 5,
      "label": "Pôle communication/marketing",
      "code": "MAR"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Richard Ratiman",
    "abregate": "RR"
  }, {
    "id": 12,
    "username": "rodolphe.bertolini",
    "lastName": "Bertolini",
    "firstName": "Rodolphe",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 2,
      "label": "ROLE_AGENT",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 3,
      "label": "Pôle ingénierie logicielle",
      "code": "ING"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Rodolphe Bertolini",
    "abregate": "RB"
  }, {
    "id": 10,
    "username": "simon.larthe",
    "lastName": "Larthe",
    "firstName": "Simon",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 2,
      "label": "ROLE_AGENT",
      "canRegulateCounter": false,
      "canSeeRequestAttachFile": false
    }],
    "department": {
      "id": 5,
      "label": "Pôle communication/marketing",
      "code": "MAR"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Simon Larthe",
    "abregate": "SL"
  }, {
    "id": 11,
    "username": "sonia.touahri",
    "lastName": "Touahri",
    "firstName": "Sonia",
    "phone": "",
    "isDeleted": false,
    "roles": [{
      "id": 7,
      "label": "ROLE_RH",
      "canRegulateCounter": true,
      "canSeeRequestAttachFile": true
    }],
    "department": {
      "id": 2,
      "label": "Service des ressources humaines",
      "code": "RH"
    },
    "enabled": true,
    "accountNonExpired": true,
    "accountNonLocked": true,
    "credentialsNonExpired": true,
    "label": "Sonia Touahri",
    "abregate": "ST"
  }];
});

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as vm">
  <p>Hello, {{name}}!</p>

  <select ng-model='vm.choosenDepartment' ng-options="item.id as item.label for item in vm.departmentList track by item.id">
  </select>
  <br/>

  <ul>
    <li ng-repeat="i in  (vm.departmentTmp | filter:{department: {id: vm.choosenDepartment}})">{{i.label}}</li>
  </ul>


</body>

</html>

/* Put your css in here */