Angular: State

http://angularjs.org/

HTML

<script src="http://ci.angularjs.org/job/angular.js-misko/393/artifact/build/pkg/0.10.7-6e9a6630/angular-0.10.7-6e9a6630.js"></script>
<div class="component">
  <span ng-hide="state.edit" ng-click="toggleState()">{{name}}</span>
  <input type="text" ng-model="name" ng-show="state.edit"/>
  <button ng-click="toggleState()">{{state.button}}</button>
  {{state.description}}
</div>

JavaScript

function Main($scope, states) {
  var currentState = 0;

  $scope.toggleState = function(newState) {
    currentState = (currentState + 1) % states.length;
    $scope.state = states[currentState];
  };

  $scope.name = 'Default';
  $scope.state = states[currentState]
}
      
var app = angular.module('myApp', []);

app.value('states', [{
  button: 'Edit',
  edit: false,
  description: 'HAHA'
}, {
  button: 'Save',
  edit: true,
  description: 'You are in editting mode.'
}]);