Question

Using BreezeJS with AngularJS gives errors. For example when using ‘filter’ in an ng-repeat the console reports: running out of stack space.

Steps to reproduce

1. Take the Todo-Angular BreezeJS sample & open in VS 2012.
2. In index.html add right before the <ul>

    <div>
    <input ng-model="query" type="search" placeholder="search" />
    </div>

1. Add the following code to the data-ng-repeat on the li element

    <li data-ng-repeat="item in items | filter:query">

The filter:query should filter the list based upon the text in the input
but it doesn’t.
In IE 10 the console reports “running out of stack space”.
In Chrome the console reports”Range Error”:

(anonymous function) angular.js:5582
(anonymous function) angular.js:4679
Scope.$digest angular.js:7739
Scope.$apply angular.js:7926
listener angular.js:11228
v.event.dispatch jquery-1.8.3.min.js:2
o.handle.u

When you use angular.copy(src, dest); where src is created by BreezeJS I see
another stack_overflow error.

Answer 1

That won’t work because you’re asking Angular to match the search text to every property of the TodoItem.

A Breeze entity’s properties include the entityAspect which has a property called entity that points back to the TodoItem instance … and around you go until the stack overflows (pun intended).

You need to use a filter function that does specific comparisons. Try this:

In Index.html

<div>
  <input data-ng-model="searchText" type="Search" placeholder="search" />
</div>
<ul>
    <li data-ng-repeat="item in items | filter:itemFilter">
    ... etc. ...

In controller.js

$scope.searchText = "";

// Beware: this is called a lot!
$scope.itemFilter = function (todoItem) {
    var searchText = $scope.searchText;
    // if there is search text, look for it in the description; else return true
    return searchText ?
        -1 != todoItem.Description.toLowerCase().indexOf(searchText.toLowerCase()) :
        true;
};

Works like a charm on my machine 🙂

p.s.: your mishap with angular.copy() has the same cause … it does a depth copy of every property and entities tend to have circular references.