Colors now working (with a couple bugs and room for improvement)

.gitignore

@@ -23,8 +23,9 @@ coverage
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 
-# Dependency directory
+# Dependency directories
 node_modules
+bower_components
 
 # Optional npm cache directory
 .npm

app/app.controller.js

@@ -0,0 +1,23 @@
+
+
+game.controller("app", ['$scope', '$window', 'cellFactory', 'gameFactory', function($scope, $window, Cell, gameOfLife){
+  $scope.gameOfLife = gameOfLife;
+  var FileReader = new $window.FileReader()
+  // document.getElementById('step_btn').addEventListener('click', $scope.gameOfLife.step.bind($scope.gameOfLife))
+  // document.getElementById('clear_btn').addEventListener('click', $scope.gameOfLife.clear.bind($scope.gameOfLife))
+  // document.getElementById('play_btn').addEventListener('click', $scope.gameOfLife.enableAutoPlay.bind($scope.gameOfLife))
+  // document.getElementById('reset_btn').addEventListener('click', $scope.gameOfLife.randomize.bind($scope.gameOfLife))
+  document.getElementById('submit_file').addEventListener('click', function() {
+    var file = document.getElementById('input').files[0],
+        content = FileReader.readAsText(file)
+    while (FileReader.readyState !== 2) {
+      console.log(FileReader.readyState)
+    }
+    console.log(content.result)
+  })
+
+  $scope.gameOfLife.createAndShowBoard();
+
+
+
+}]);

app/components/game/controls/buttons/button.directives.js

@@ -0,0 +1,98 @@
+
+game.directive("clear", function(forEachCell, cellFactory){
+  return {
+    restrict: "E",
+    replace: true,
+    template: "<button id='clear_btn' class='btn btn-info' ng-click='clear()'>Clear</button>",
+    link: function(scope){
+      scope.clear = function(){
+        forEachCell( function(cell){
+          debugger;
+           let cellObj = angular.element(cell).scope()
+           cellObj.$$childHead.cellObj.makeDead(true)}
+      )}
+    }
+  }
+})
+
+game.directive("pause", function(){
+  return {
+    restrict: "E",
+    replace: true,
+    template: "<button>Pause</button>"
+  }
+})
+
+game.directive("play", ['gameFactory', function(game){
+  return {
+    restrict: "E",
+    replace: true,
+    template: `<button id='play_btn' class='btn btn-primary' ng-click="enableAutoPlay()">Play</button>`,
+    link: function(scope, playBtn){
+      scope.autoPlayOn = false;
+      scope.intervalName = 'playPause';
+      scope.enableAutoPlay = function(){
+        if (scope.autoPlayOn) {
+          scope.autoPlayOn = false
+          clearInterval(scope.setIntervalID)
+          playBtn[0].innerHTML = 'Play'
+        } else {
+          debugger;
+          scope.autoPlayOn = true
+          scope.setIntervalID = setInterval(function(){game.step()}, document.getElementById('step_amount').value || 100)
+          playBtn[0].innerHTML = 'Pause'
+        }
+      }
+    }
+  }
+}])
+
+game.directive("reset", function(forEachCell){
+  return {
+    restrict: "E",
+    replace: true,
+    template: "<button id='reset_btn' class='btn btn-warning' ng-click='random()'>Reset Random</button>",
+    link: function(scope){
+      scope.random = function () {
+        forEachCell(function (cell, x, y) {
+          debugger;
+          let cellObj = angular.element(document.getElementById( x + '-' + y)).scope().$$childHead.cellObj;
+          var state = Math.floor(Math.random() * 2)
+          if (state === 1) {
+            cellObj.makeDead(true);
+          } else {
+            cellObj.makeAlive(true);
+          }
+        })
+
+      }
+    }
+  }
+})
+
+game.directive("save", function(){
+  return {
+    restrict: "E",
+    replace: true,
+    template: "<button>Save</button>"
+  }
+})
+
+game.directive("step", ['gameFactory', function(gameFactory){
+  return {
+    restrict: "E",
+    replace: true,
+    template: "<button id='step_btn' class='btn btn-success' ng-click='step()'>Step</button>",
+    link: function(scope){
+      scope.step = gameFactory.step;
+    }
+  }
+}])
+
+game.directive("submit", function(){
+  return {
+    restrict: "E",
+    replace: true,
+    template: "<button>Submit</button>"
+  }
+})

app/components/game/controls/controlPanel/controlPanel.directive.js

@@ -0,0 +1,22 @@
+'use strict';
+game.directive("controlPanel", function(){
+  return {
+    restrict: "E",
+    replace: true,
+    template: controlPanelTemplate()
+  }
+})
+
+
+function controlPanelTemplate(){
+  return `
+  <div id="control_panel" class="container-fluid">
+    <button name="collapse" class="glyphicon glyphicon-menu-down" />
+    <step></step>
+    <input id='step_amount' placeholder="Auto Play Speed (ms) " value='600'>
+    <play></play>
+    <reset></reset>
+    <clear></clear>
+  </div>
+  `
+}