Angular not finding variable made by ng-repeat

Question

I am using an AngularDart component in my webpage with the @Component. I can access variables inside the class by using the standard angular expressions in the html by using ng-model and {{}}. However when implementing a standard looping procedure:

<div ng-repeat="(x, y) in example_dictionary" ng-if="example_dictionary!=null">
    {{x}}
</div>

This snippet gives me the strange error Class '~~~' has no instance getter 'x' (Class name snipped). The error is not wrong per-say. The class really does not contain any getter of x, but it shouldn't need to because the ng-repeat method is setting it and maintaining it.

For added entertainment, I replaced the {{x}} section with a static string I am looping and behold the loop command does in fact loop through the dictionary the proper amount. So the ng-repeat is not causing any problems with either looping or setting both of the non-pre-existing x and y variables.

The question: Why can't I access x and how can I access x?

Answer 1

That should work, but have you tried?

<div ng-repeat="entry in example_dictionary">
    {{entry.x}}
</div>

Answer 2

After reducing the problem to a really simple size, I found out that removing the ng-if section of the div fixed the problem. How and why that even was a problem is beyond me. I now segregated the action of ng-if and ng-repeat into separate divs. I am not particularly happy with my findings, but it works.