JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      <h4>One ok</h4>
      <sublist fields="fields" />
      <h4>Two not ok</h4>
      <sublist fields="fields | filter:'Rumba'" />
  </div>
</div>

JavaScript

angular.module('myApp', [])
    .directive('sublist', function () {
        return {
            restrict: 'E',
            scope: { fields: '=' },
            template: '<div ng-repeat="f in fields"><small>here i am:</small> {{f}}</div>'
        };
    })
    .controller('MainCtrl', function($scope) {
        $scope.fields = ['Samba', 'Rumba', 'Cha cha cha'];
    });