Directive in ion-tabs with ng-click in ng-repeat not working

ionic-v1
1

I’m not sure if this is ionic specific or just an issue with angular. I have tabs nested in a side menu and within one of those tabs I have a directive for a tag manager. The directive seems to work fine, but the tags that are created in the ng-each have a ng-click on them that is not firing.

     <ion-view title="Explore">
        <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon ion-gear-b" ng-click="toggleFilters()"></button>
        </ion-nav-buttons>
        <ion-side-menus>
    
            <ion-pane ion-side-menu-content>
                <ion-nav-view name="filterContent" animation="slide-right-left"></ion-nav-view>
            </ion-pane>
            <ion-side-menu side="right">
                <header class="bar bar-header bar-stable has-tabs-top">
                      <h1 class="title text-right">Search Filters</h1>
                </header>
                <ion-tabs class="tabs-positive tabs-top">

  <ion-tab title="Skills">
    <!-- Tab 1 content -->
    <label class="item item-input">
                            
        <tag-manager tags="tags" tag-model="filterData.skills" placeholder="Skill"></tag-manager>
        
    </label>
     <a class="button button-block button-btm" ng-click="filterContent()">Apply</a>
  </ion-tab>

  <ion-tab title="Location">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Specialization">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>
            </ion-side-menu>
        </ion-side-menus>
    </ion-view>

Here is my directive.

angular.module('wt.directives', [])
.directive('tagManager', function() {
    return {
        restrict: 'E',
        scope: {
            tags: '=',
            tagModel:'=',
            placeholder: '='
        },
        template: function(elem, attr) {
            var t =  '<input type="hidden" ng-model="' + attr.tagModel + '"></input><input type="text" placeholder="' + attr.placeholder + '" ng-model="new_value"></input> ' +
            '<div class="tags"><a class="tag" ng-repeat="tag in tags track by $index" ng-click="remove($index)">{{tag}} &times;</a></div>' ;
            return t;
        },
        link: function ( $scope, $element ) {

            // FIXME: this is lazy and error-prone
            var hidden = angular.element($element.children()[0]);


            var input = angular.element( $element.children()[1] );

            input.attr('placeholder', $scope.placeholder);

            // This adds the new tag to the tags array
            $scope.add = function() {
                $scope.tags.push( $scope.new_value );
                $scope.new_value = "";
                angular.element(hidden).val( $scope.tags.join() );
            };

            // This is the ng-click handler to remove an item
            $scope.remove = function ( idx ) {
                console.debug('remove');
                $scope.tags.splice( idx, 1 );
                angular.element(hidden).val( $scope.tags.join() );
            };

            // Capture all keypresses
            input.bind( 'keypress', function ( event ) {

                // But we only care when Enter was pressed
                if ( event.keyCode == 13 ) {
                    // There's probably a better way to handle this...
                    $scope.$apply( $scope.add );
                }
            });


        }
    };
});