title: How to hide and show HTML element in angularjs?
body: <p>I have table for some task, In that table every row has one task. 
  In every row there is status which is controller by one button. Initial status of every task will be show as <strong>In Progress</strong> and text of Button as <strong>Mark Done</strong>, But when click on the button then It will change the status of the task as <strong>Done</strong> and change the text of button as <strong>Mark In Progress</strong>. If In future If we want to change the status of "Done" task then we can change the status through Button "Mark In Progress". </p>
  
  <p><a href="http://plnkr.co/edit/iiMSB49F4wDM0PxSBr1U?p=preview" rel="nofollow">Please see the live DEMO</a></p>
  
  <p>In this live demo, </p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;ToDo API Client Demo&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="myApp" ng-controller="tasksCtrl"&gt;
    &lt;div class="navbar"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;a class="brand" href="#"&gt;ToDo API Client Demo&lt;/a&gt;
          &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
  
           &lt;table class="table table-striped"&gt;
               &lt;tr&gt;&lt;td style="width: 1px;"&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Task&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Options&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr ng-repeat="task in tasks"&gt;
                  &lt;td&gt;
                      &lt;span data-bind="visible: done" class="label label-success"&gt;Done&lt;/span&gt;
                      &lt;span data-bind="visible: !done()" class="label label-important"&gt;In Progress&lt;/span&gt;
                  &lt;/td&gt;
              &lt;td&gt;{{task.title}}&lt;/td&gt;
              &lt;td&gt;{{task.description}}&lt;/td&gt;
                          &lt;td&gt;  &lt;a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)"&gt;Edit&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;  &lt;a class="btn" data-toggle="modal" data-ng-click="removeRow(task)"&gt;Delete&lt;/a&gt;&lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;span data-bind="visible: done"&gt;
                            &lt;button data-bind="click: $parent.markInProgress" class="btn"&gt;Mark In Progress&lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/td&gt;
                          &lt;td&gt;
                       &lt;span data-bind="visible: !done()"&gt;
                            &lt;button data-bind="click: $parent.markDone" class="btn"&gt;Mark Done&lt;/button&gt;
                       &lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
           &lt;/table&gt;
  
              &lt;a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)"&gt;Add Task&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="modal" role="dialog" class="modal hide fade"&gt;
          &lt;div&gt;
              &lt;div class="modal-header"&gt;
                  Task Dialog
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;label for="txtName"&gt;&lt;/label&gt; 
                  &lt;input type="text"  ng-model="selectedTask.title" /&gt;
                  &lt;input type="text"  ng-model="selectedTask.description" /&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal"&gt;OK&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
              &lt;h3 id="addDialogLabel"&gt;Add Task&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="inputTask"&gt;Task&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;"&gt;&lt;br /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="inputDescription"&gt;Description&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt; 
              &lt;button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal"&gt;Add Task&lt;/button&gt;
  
              &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
     &lt;script&gt;
      var app = angular.module('myApp', []);
      app.controller('tasksCtrl', function($scope, $http) {
          //$http.get("data.json")
          $http.get("/todo/api/v1.0/tasks")
          .success(function(response) {
            console.log(response.tasks)
            $scope.tasks = response.tasks;
          });
  
          $scope.editTask=function(task) {
              $scope.selectedTask = task;
          };
          $scope.removeRow = function (task) {
              $scope.tasks.splice(task, 1);
          };
          $scope.addNewTask=function(){
              //$scope.tasks.push({title :$scope.task1,description: $scope.description1});
              $scope.tasks.push({title : $scope.task1, description : $scope.description1});
              $scope.task1='';
              $scope.description1='';
             //   $scope.tasks.push('dhsh');
          };
      });
      /*
      app.controller('addNewTaskCtrl', ['$scope', function($scope){
          $scope.addNewTask=function(){
              var task;
          }
      }]);*/
  
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>