Hide element if condition is true

Question

I have a directive which should allow me to change a specific mode, updating the scope as well.

This works fine.

The issue I'm facing now is that I need to be able to hide the element for the current mode.

I'll explain it better:

I have modes array:

[1,2,3,4,5]

and some links inside an ng-repeater:

<a href=""
   ng-repeat="m in zoneModes"
   ng-click="changeZoneMode({{m}})"
   id="{{m}}"
   class="menu-item">
    <i class="icon-mode-{{m}}"></i>
</a>

what I have to do is hide an element if selectedZone is not equal to m:

ng-if="selectedMode!=m"

It seams like everything is fine doing this, but it is not.

You can clearly see what's the problem from this live example

Basically, everytime the condition is meet, it removes the element and never put it back.

I also tried with ng-show, but the result is not good either as it leaves an empty spot (you can check this other example)

Any suggestions? Thanks

EDIT

Trying to use the filter as suggested, but with no luck:

.directive('mySelector', function() {
  var changeMode, linkFunction;

  changeMode = function(newmode) {
    var $scope;
    $scope = this.$parent;
    $scope.selectedMode = newmode;
    $('.menu-open').attr('checked', false);
  };
  linkFunction = function(scope, element, attrs) {
    scope.changeMode = changeMode;
    scope.changeZoneMode = changeMode;
    scope.zoneModes = [1, 2, 3, 4, 5];

    return scope.$watch((function() {
      return scope.selectedMode;
    }), function(newMode) {
      return scope.selectedMode = newMode;
    });
  };

  return {
    restrict: 'E',
    scope: {
      selectedMode: '=currentmode',
      id: '@id'
    },
    replace: true,
    templateUrl: 'templates/template.html',
    link: linkFunction,
    controller: 'abc'
  };
}).controller('abc', ['$scope', function($scope) {
  $scope.checkM = function (mode, m) {
    return mode == m;
  };
}])

template.html

<a href=""
   ng-repeat="m in zoneModes|filter:checkM(selectedMode,m)"
   ng-click="changeZoneMode({{m}})"
   id="{{m}}"
   class="menu-item">
    <i class="icon-mode-{{m}}"></i>
</a>

Answer 1

At the end , I managed to solve this using a filter, and here's the final code:

angular.module('App', ['ionic'])

.controller('ctrl', ['$scope', function($scope) {
  $scope.current = {
    'id': 0,
    'mode': 1
  }
}])

.directive('mySelector', function() {
  var changeMode, linkFunction;

  changeMode = function(newmode) {
    var $scope;
    $scope = this.$parent;
    $scope.selectedMode = newmode;
    $('.menu-open').attr('checked', false);
  };

  linkFunction = function(scope, element, attrs) {
    scope.changeMode = changeMode;
    scope.changeZoneMode = changeMode;
    scope.zoneModes = [1, 2, 3, 4, 5];

    return scope.$watch((function() {
      return scope.selectedMode;
    }), function(newMode) {
      return scope.selectedMode = newMode;
    });
  };

  return {
    restrict: 'E',
    scope: {
      selectedMode: '=currentmode',
      id: '@id'
    },
    replace: true,
    templateUrl: 'templates/template.html',
    link: linkFunction,
  };
})

.filter('abc', function() {
        return function( m, sel ) {
          console.log('abc',arguments);
          var filteredModes = [];
          angular.forEach(m, function(mode) {
          if( sel != mode ) {
              filteredModes.push(mode);
            }
          });
          return filteredModes;
        }
    });

and it is now working as expected.