AngularJS angular.equals working differently on ng-show

Question

I have these lines in my controller

$scope.VLANEnabledServers = {};
$scope.myEmpty = {};
console.log(angular.equals($scope.myEmpty, $scope.VLANEnabledServers));

and this ng-show in the template

<table ng-show="!angular.equals(myEmpty, VLANEnabledServers)" ng-cloak class="table table-striped table-bordered ng-hide">

The angular.equals function in the controller prints TRUE which is correct. But in the view , where the condition in ng-show should be !TRUE the table is displayed anyways

Am I doing something wrong ?

Answer 1

The ngShow directive takes an angular expression as an attribute.

An angular expression is limited in what it can contain, and, whilst it looks like javascript sometimes, actually isn't. See the linked page for more details of what is and isn't a valid angular expression.

What you'll most likely want to do is create a function on the scope to do the comparison for you, and then call that function from your expression:

$scope.isEmptyObject = function (item){
  return angular.equals( {} , item );
}

With:

<table ng-show="!isEmptyObject(VLANEnabledServers)">

Answer 2

Let's keep this logic in the controller and it works (your dom can't eval the objects you send to the equals function your way)

$scope.VLANEnabledServers = {};
$scope.myEmpty = {};
$scope.showme = function() {
    return angular.equals($scope.VLANEnabledServers , $scope.myEmpty);
}

<table ng-show="!showme()" ng-cloak class="table table-striped table-bordered ng-hide">