Angular filtering does not keep changes to class

Question

Okay, so I have an arraylist which Iam repeating over like so:

<div class="row">
            <input type="text" data-ng-model="name"
                class="resource-search" placeholder="Insert a resource name">
        </div>
        <div class="row">
            <div
                data-ng-repeat="resource in allResources | resourceFilter:name"
                data-ng-click="addResourceToProject(resource, $event)"
                class="col-md-2">
                <resource profile="resource"></resource>
            </div>

And the custom filter I'm using it:

app.filter('resourceFilter', function() {
 return function(input, text){
         input = input || [];
         var out = [];

         input.forEach(function(res) {
             if(res.name.toUpperCase().startsWith(text.toUpperCase())) {
                 out.push(res);
             } 
         });
         return out;
     };
});

And then I try to adjust every resource which gets clicked on in my controller:

$scope.addResourceToProject = function(resource, event) {

    var elementIsImage = event.target.tagName.toLowerCase() === 'img';
    if(index >= 0) {
        resources = $scope.projectList[index].resources;
    } else {
        resources = shareService.getResourcesToNewProject();
    }

    if(elementIsImage) {
        var target = $(event.target);
        if(target.hasClass('picked')) {
            var elementIndex;
            resources.forEach(function(res) {
                if(res.id === resource.id) {
                    elementIndex = resources.indexOf(res);
                }
            });
            resources.splice(elementIndex, 1);
            target.removeClass('picked');
        } else {
            target.addClass('picked');
            resources.push(resource);
        }
    }
};

Everything works if you dont use the search bar, when using the search bar the previous changes in class gets discarded, i.e you use the search bar find a resource and click it, the changes in class applies and everything is fine, then if you use the search bar again the old changes in class gets discarded, but the new ones apply. The adding to array is working as intended though.

Thanks in advance.

Answer 1

Okay so adding the class with ng-class directly to the DOM did the trick, I'm assuming all the filtered objects are temporary on a certain level which means altering them from the controller means a change on a temporary object and hence the changes only stuck in the first search, solution:

<img data-ng-src="{{ profileimg }}" data-ng-class="{'picked': profile.picked}"></img>