dependency injection in angular /factories #services

index.html

@@ -19,7 +19,7 @@
       </h3>
     </div>
           <!-- Hook on the controller for this view and specify when to show it using ng-hide -->
-          <div ng-controller = "listCtrl as list" ng-hide = "list.quizActive">
+          <div ng-controller = "listCtrl as list" ng-hide = "list.quizMetrics.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">
@@ -87,6 +87,11 @@
             </div> <!-- modal markup ends -->
 
           </div> <!-- container -->
+
+          <!-- quizCtrl -->
+          <div ng-controller = "quizCtrl as quiz" ng-show ="quiz.quizMetrics.quizActive">
+              <p>Work hard bro u will get it </p>
+          </div>
   </div>
 <!-- third party scripts -->
   <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> -->
@@ -96,5 +101,7 @@
 <!-- application scripts -->
   <script src ="js/app.js"></script>
   <script src ="js/controllers/list.js"></script>
+  <script src ="js/controllers/quiz.js"></script>
+  <script src ="js/factories/quizmetrics.js"></script>
 </body>
 </html>

js/controllers/list.js

@@ -4,14 +4,16 @@
           .module("turtleFacts")
           .controller("listCtrl", ListController);
 
-    function ListController () {
+    ListController.$inject = ['quizMetrics'];
+
+    function ListController (quizMetrics) {
       // List controller logic
       var vm = this;
 
+      vm.quizMetrics = quizMetrics;
       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;
 
@@ -20,7 +22,7 @@
       }
 
       function activateQuiz () {
-        vm.quizActive = true;
+        quizMetrics.changeState(true);
       }
 
     }

js/controllers/quiz.js

@@ -0,0 +1,17 @@
+(function () {
+
+      angular
+             .module("turtleFacts")
+             .controller("quizCtrl", QuizController);
+
+      QuizController.$inject = ['quizMetrics'];       
+
+      function QuizController (quizMetrics) {
+
+          var vm = this;
+
+          vm.quizMetrics = quizMetrics;
+
+      }
+
+}) ();

js/factories/quizmetrics.js

@@ -0,0 +1,21 @@
+(function () {
+
+      angular
+             .module("turtleFacts")
+             .factory("quizMetrics", QuizMetrics);
+
+      function QuizMetrics() {
+
+             var quizObj = {
+                 quizActive: false,
+                 changeState: changeState
+             };
+
+             return quizObj;
+
+             function changeState(state) {
+                 quizObj.quizActive = state;
+             }
+      }
+
+}) ();