ng-click adding and removing classes

Question

I trying to create a click function which has two states add and added both states are visible in my solution, however i only want one state to show at a time. thus far my logic is to structure it in the following way. demo I have noticed when i click on the item the class is activated how i am unable to remove the class. Demo

<div ng-repeat= "fav in fav">
   <div ng-click="select(fav)" ng-class="favClass(fav)" class="panel-controls panel-controls__item">
   {{fav}}
</div> 

    var app = angular.module("myApp", []);
  app.controller("favouriteBtn", function ($scope){

     $scope.fav = ['add', 'added'];
     $scope.selected = $scope.fav[0];

     $scope.select = function(fav) {
        $scope.selected = fav;
      };

    $scope.favClass = function(fav){
      return fav === $scope.selected ? 'active' : underfined;
    };
  });

Answer 1

just a guess:

ng-class="{active: fav == selected}"

or if you only want to change displaying the button:

ng-show="fav == selected" 

or

ng-show="fav != selected" 

Answer 2

I would do it as Michael says.

On the view:

<div class="{{selected}}">
  <div ng-show="selected == 'add'">
    <button ng-click="toggleButton()">Button1</button>
  </div>
  <div ng-show="selected == 'added'">
    <button class='disabled'>Button2</button>
  </div>
</div>

On the controller:

angular.module('myApp').controller('ButtonCtrl',
[
  '$scope',
  function($scope){
    $scope.fav = ['add', 'added'];
    $scope.selected = fav[0];

    $scope.toggleButton = function(){
      $scope.selected = fav[1];
    };
  }
]);