title: how to decorate input field with css class on eval error
body: <p>I want to have a simple input field where you can type in a javascript expression, and have it be eval-ed on entry, kind of like a poor-man's calculator.</p>
  
  <p>So far, what I have sort of works.. but now I want to decorate it with css classes when the expression itself is invalid. Can someone suggest a way to do it?</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function Ctl($scope) {
            $scope.expr = '1+1';
          }
  
          angular.module('filters', []).
            filter('evaluate', function() {
              return function(input) {
                try {
                  return eval(input);
                } catch (e) {
                  return input;
                }
              };
            });
  
          angular.module('main', ['filters']);&lt;/script&gt;
  &lt;head&gt;
  
  &lt;body ng-controller="Ctl" ng-app="main"&gt;
    &lt;div&gt;&lt;input type="text" ng-model="expr"&gt;&lt;/div&gt;
    &lt;span&gt;{{expr|evaluate}}&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Using the suggestion offered by Manny D, I modified the code to look as follows, and all seems well. There is a caution in <a href="https://stackoverflow.com/questions/14841897/how-to-pass-param-to-a-filter-function-in-angular-js">how to pass param to a filter function in angular js</a> about not using the 'this' param directly, but I think I'm ok here, doing that.. Anyone care to comment?</p>
  
  <pre><code>&lt;head&gt;
      &lt;style type="text/css"&gt;
      .red  {background-color: #fee;}
      &lt;/style&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function Ctl($scope) {
            $scope.cls = 'green';
            $scope.expr = '1+1';
          }
  
          angular.module('filters', []).
            filter('evaluate', function() {
              return function(input, a1, a2) {
                try {
                  this.cls = 'green';
                  return res = eval(input);
                } catch (e) {
                  this.cls = 'red';
                  return input;
                }
              };
            });
  
          angular.module('main', ['filters']); // declare dependencies&lt;/script&gt;
  &lt;head&gt;
  
  &lt;body ng-controller="Ctl" ng-app="main"&gt;
    &lt;div&gt;&lt;input type="text" ng-class="cls" ng-model="expr"&gt;&lt;/div&gt;
    &lt;span&gt;{{expr|evaluate}}&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>