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"></sublist>
      <h4>Two not ok</h4>
      <sublist fields="fields" filter="'Rumba'"></sublist> <!-- This one raises error -->
  </div>
</div>

JavaScript

var myModule = angular.module('myApp',[]);

myModule.
directive('sublist', ['$filter',function ($filter) {
        return {          
            restrict: 'E',
            scope: { fields: '=' ,
                    tagFilter: '=filter'
                  },
            template: '<div ng-repeat="f in fields | filter:tagFilter">{{f}}</div>'
        };
    }])
    .controller('MainCtrl', function($scope) {              
        $scope.fields = ['Samba', 'Rumba', 'Cha cha cha'];
    });