AngularJs, ng-show button table cell

I have a table with each row displaying a button. I have a requirement where I have to conditionally display a button with different states in these rows. So in my view I used ng-show for each of the button.

<table> 
  <tr>
    <td>row1 col1</td>
    <td>
      <button ng-show="!func1(param1,param2)" >
      <button ng-show="func1(param1,param2)">
    </td>
  </tr>
  <tr>
    <td>row2 col2</td>
    <td>
      <button ng-show="!func1(param1,param2)" >
      <button ng-show="func1(param1,param2)">
    </td>
  </tr>
</table>

In my .js file:

$scope.func1 = function(p1,p2) {
    if(p1 === 'A' && p2 === 'B') {
      return true;
    } else {
      return false;
    }
}

Now there is another function in the controller changes the return value for the ng-show function. I can see in the developer tools that the function now returns a different value but the view is not getting updated.

Can you please advise what I am doing wrong here or is there a better way to achieve this?

So from your question my understanding is that, you need to set a variable at the level of each row in the table and also update all the rows from a function.

I am assuming you are using ng-repeat to create the rows. You can use the trusty ng-if to create a new scope so that, when there is variable update happens on a single row, the variable update is isolated to that row alone and does not spread to other rows. the code that does this is.

<tr ng-repeat="item in items" ng-if="true">
      <td>row{{$index+1}} col{{$index+1}}</td>
      <td>
      <button ng-show="showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = false;">A</button>
      <button ng-show="!showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = true;">B</button>
</td>

The advantage of this method is that when you update the variable from the controller, we can update all the rows with a single variable assignment. Below is the functions that do the variable update.

  $scope.showB = function(){
    $scope.showThis = false;
  }
  $scope.showA = function(){
    $scope.showThis = true;
  }

Simply put, the updates from the parent scope(controller) will propogate to all the children(new scopes created by ng-if), but the children updates will not propogate!

Below is a simple example demonstrating this!

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

app.controller('MyController', function MyController($scope) {
$scope.showThis = true;
	$scope.items = [1,2,3,4,5];
  $scope.p1 = 'A';
  $scope.p2 = 'B';
  $scope.showB = function(){
  	$scope.showThis = false;
  }
  $scope.showA = function(){
  	$scope.showThis = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <table>
    <tr ng-repeat="item in items" ng-if="true">
      <td>row{{$index+1}} col{{$index+1}}</td>
      <td>
      <button ng-show="showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = false;">A</button>
      <button ng-show="!showThis" ng-init="p1 === 'A' && p2 === 'B'" ng-click="showThis = true;">B</button>
    </td>
  </tr>
</table>
<button ng-click="showA()">show A</button>
<button ng-click="showB()">show B</button>
</div>