Odd duplication in Angular repeater - angularjs

Question

I am getting some odd behavior when I update the array that a repeater is using from a $watch
This is the HTML
<section data-ng-controller="JobsController">
<div class="page-header">
<h1>New Job</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group" data-ng-controller="DisciplinesController" data-ng-init="find()">
<h3>Discipline</h3>
<div>
<!--clicking these will filter -->
<label class="form-control" data-ng-repeat="discipline in disciplines">
<input type="checkbox" checklist-model="$parent.dl" checklist-value="discipline"> {{discipline.name}}
</label>
</div>
</div>
<!--this is the updated list -->
<div class="form-group">
<h3>Roles</h3>
<div>
<label class="form-control" data-ng-repeat="role in selectedDisciplineRoles">
<input type="checkbox" checklist-model="roleList" checklist-value="role"> {{role.name}}
</label>
</div>
</div>
<div class="form-group">
<h3>What "Job" are they trying to do?</h3>
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
What I am trying to do is have this model filter on the server and have the client update with the appropriate values
'use strict';
// Jobs controller
angular.module('jobs').controller('JobsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Jobs', 'RolesAPI',
function($scope, $stateParams, $location, Authentication, Jobs, RolesAPI) {
$scope.authentication = Authentication;
$scope.$watchCollection("dl", function(){
var activeDisciplineIds = _.pluck($scope.dl, "_id");
$scope.selectedDisciplineRoles = [];
RolesAPI.getByDisciplineIds(activeDisciplineIds)
.success(function(data){
$scope.selectedDisciplineRoles = data;
console.log($scope.selectedDisciplineRoles)
}
);
});
}
]);
I don't see any duplicates on the return, however when i click on the checkbox there is a quick duplication of the all the active results, and then the duplicates disappear.
I am open to creating an angualar filter but wasn't able to get it working. Here is the data that I am dealing with.
[
{
_id: "547d2ad8b62d3f8bfaf139f8",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956b0824679a54c9142d2",
__v: 0,
created: "2014-12-02T02:58:32.422Z",
disciplines: [
"5476625147bd3200004bae00"
],
name: "item 1"
},
{
_id: "547d0012b62d3f8bfaf139f7",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956a6824679a54c9142d1",
__v: 0,
created: "2014-12-01T23:56:02.427Z",
disciplines: [
"5476616347bd3200004badfb",
"547661cb47bd3200004badfd"
],
name: "item 2"
},
{
_id: "547cfea6b62d3f8bfaf139f6",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956a6824679a54c9142d1",
__v: 0,
created: "2014-12-01T23:49:58.885Z",
disciplines: [
"547661cb47bd3200004badfd",
"5476616347bd3200004badfb"
],
name: "item 3"
}
]
The filtering needs to happen based on a match of an array of ids, and those in the disciplines array of the object.
so something like
["5476616347bd3200004badfb", "547661cb47bd3200004badfd"]
would return item 1 and item 3, not item 2

Answer 1

I ended up getting the filter working like this.
'use strict';
angular.module('roles').filter('rolesByDiscipline', [
function() {
return function(roles, disciplineIds) {
return roles.filter(function(role) {
for (var i in role.disciplines) {
if (_.pluck(disciplineIds, "_id").indexOf(role.disciplines[i]) != -1) {
return true;
}
}return false;
});
};
}
]);
HTML
<div class="form-group" data-ng-controller="RolesController" data-ng-init="find()">
<h3>Roles</h3>
<div>
<label class="form-control" data-ng-repeat="role in roles | rolesByDiscipline:$parent.dl">
<input type="checkbox" checklist-model="roleList" checklist-value="role"> {{role.name}}
</label>
</div>
</div>