title: When to use a filter vs a directive in Angularjs
body: <p>It's a simple question - and it may have been asked (just couldn't find it..)</p>
  
  <p>When would you use a filter over a directive when it comes to manipulating the data, or vice versa?</p>
  
  <p>In a really really simple example, see this <a href="http://plnkr.co/edit/RMh2mcB49WDsmBemsQrU?p=preview">Plunkr</a></p>
  
  <p>Essentially, I have the following <code>javascript</code></p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('MyCtrl', ['$scope', function($scope){
    $scope.testMessage = 'Some Text'
  }]);
  
  app.directive('myDirective', function(){
      return{ 
          restrict: 'A',
          link: function(scope, element, attrs){
  
              // do some stuff with the data
              // 
              element.html(scope.testMessage + ' result of my directive');
          }
      }
  });
  
  app.filter('myFilter', function(){
      return function(text){
       // do something with text
          return text + ' &amp; result of my filter';
      }
  });
  </code></pre>
  
  <p>And the following <code>html</code></p>
  
  <pre><code>  &lt;body ng-controller="MyCtrl"&gt;
      &lt;div my-directive ng-model="testMessage" &gt;&lt;/div&gt;
      &lt;br /&gt;
      &lt;div&gt;{{ testMessage | myFilter }}&lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>So when would you use one over the other?</p>