Problems with angular-ui-router - I cannot apply a filter to a repeat in a directive

Question

I have an issue that only occurs when I load directives as part of a angular-ui-router state. When I add the directives directly to index.html everything works as expected.

Here's a plunker that demonstrates the issue I'm having: http://plnkr.co/edit/EzvTOiSzaf6jjCsBKM1e?p=preview

I have a Resource personResource that returns an array of objects.
The Controller personController queries the Resource, and saves the results into $scope.people.
This populates a template list-people.html which is loaded in a directive listPeople.

What I'm having problems with is another directive filterPeople contains radio buttons with options to filter the list.

The expected result is that if I select an option, it will only display those rows where the row's value matches the option value. What is actually happening is that all of the data is displayed no matter what I select

Answer 1

It's a scope issue, your templates have their own child scopes that can't see values in each other, so when you set the personFilter.color in one template, your template using it as a filter doesn't know about it. You can use angularjs batarang or just insert a simple binding to debug these issues (plnkr):

</tbody></table>personFilter json: {{personFilter|json}

To fix the problem you can set the personFilter object on the parent scope and both children will use the inherited object. Just realize that if you set the object on a child scope instead of just a property, it will only set that value on the one child scope and the other scopes will continue to use the inherited object. You should probably put the controller on a parent. Your controller is being instantiated for both the content and sidebar, so you are querying your people twice even though the data isn't used in your sidebar...