From bbd5d3d5db6694217a3f01b5068f0038712cdc76 Mon Sep 17 00:00:00 2001
From: Raghu-Ch <raghu6004@gmail.com>
Date: Tue, 31 Jan 2017 22:12:36 -0800
Subject: [PATCH] real-time search using filters && ng-hide/ng-show && ng-click
 event

---
 index.html             | 11 +++++++++--
 js/controllers/list.js |  9 ++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c7db7ad..856cfe6 100644
--- a/index.html
+++ b/index.html
@@ -19,9 +19,16 @@
       </h3>
     </div>
           <!-- Hook on the controller for this view and specify when to show it using ng-hide -->
-          <div ng-controller = "listCtrl as list">
+          <div ng-controller = "listCtrl as list" ng-hide = "list.quizActive">
+            <form class = "form-inline well well-sm clearfix">
+                  <span class = "glyphicon glyphicon-search"></span>
+                  <input type="text" placeholder ="search" class="form-control" ng-model = "list.search">
+                  <button class = "btn btn-warning pull-right" ng-click = "list.activateQuiz()">
+                         <strong>Start Quiz</strong>
+                  </button>
+            </form>
             <div class="row">
-                <div class="col-sm-6" ng-repeat = "turtle in list.data">
+                <div class="col-sm-6" ng-repeat = "turtle in list.data | filter:list.search">
                   <div class="well well-sm">
                     <div class="row">
                       <div class="col-md-6">
diff --git a/js/controllers/list.js b/js/controllers/list.js
index a9a52bf..ac35b36 100644
--- a/js/controllers/list.js
+++ b/js/controllers/list.js
@@ -10,12 +10,19 @@
 
       vm.data = turtlesData;
       vm.activeTurtle = {}; // will be used in the view to hold the data of currently active turtle
-
+      vm.search = "";      // Adding the Search property to be used in the ng-model
+      vm.quizActive = false;
       vm.changeActiveTurtle = changeActiveTurtle;
+      vm.activateQuiz = activateQuiz;
 
       function changeActiveTurtle (index) {
         vm.activeTurtle = index;
       }
+
+      function activateQuiz () {
+        vm.quizActive = true;
+      }
+
     }
 
 var turtlesData = [