Angular Box Color Exercise I have completed an exercise where there are 4 different color boxes and 1 main box below them that is blank, when you click on one of the colored boxes, the main box changes to the color of the box you just clicked on. Also there should be working undo and redo buttons.

Am I doing this the "Angular" way by using $event or no?



(function() {
  'use strict';

function angularBoxesCtrl() {
  var vm = this;
  vm.mainBoxColor;

  var colorHistory = [];
  var undoRedo = [];

  var changeColor = function() {
    vm.mainBoxColor = colorHistory[colorHistory.length - 1];
  }


  vm.logClass = function(e) {
    var boxColor = e.target.classList[1];
    //mainBox is already same color as clicked box
    if (boxColor === vm.mainBoxColor) {
      return;
    }
    colorHistory.push(boxColor)  
    changeColor();
  }

  vm.undo = function() {
    if (!colorHistory.length) {
      return;
    }
    var undoColor = colorHistory.pop();
    undoRedo.unshift(undoColor);
    changeColor();  
  }

  vm.redo = function() {
    if (!undoRedo.length) {
      return;
    }
    var redoColor = undoRedo.shift();
    colorHistory.push(redoColor);
    changeColor();  
  }
}


angular.module('angularBoxes', [])
  .controller('angularBoxesCtrl', [
    angularBoxesCtrl
    ]);

})();
div {
  box-sizing: border-box;
}

.boxHolder {
  border: 1px solid black;
  text-align: center;
  font-size: 0;
}

.buttonHolder {
  text-align: center;
  position: relative;
  top: 40px;
}

.box {
  width: 180px;
  height: 180px;
  display: inline-block;
  border: 1px solid black;
  margin: 4px;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.mainBox {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
  position: relative;
  top: 80px;
}
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Angular Boxes&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;
&lt;body ng-app="angularBoxes" ng-controller="angularBoxesCtrl as vm"&gt;
  &lt;div class="boxHolder"&gt;
    &lt;div ng-click="vm.logClass($event)" class="box green"&gt;&lt;/div&gt;
    &lt;div ng-click="vm.logClass($event)" class="box blue"&gt;&lt;/div&gt;
    &lt;div ng-click="vm.logClass($event)" class="box red"&gt;&lt;/div&gt;
    &lt;div ng-click="vm.logClass($event)" class="box yellow"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="buttonHolder"&gt;
    &lt;button ng-click="vm.undo()"&gt;Undo&lt;/button&gt;
    &lt;button ng-click="vm.redo()"&gt;Redo&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="mainBox" ng-class="vm.mainBoxColor"&gt;&lt;/div&gt;

  &lt;!-- scripts --&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"&gt;&lt;/script&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
I would pass the className to the logClass method. Because how you wrote the method you enforce that the color name is the second class applied on the control. This is very fragile, as there is no direct relation between the class order in the an element and the result apply to them. So I would do:

vm.logClass = function(className) {
...
}
//template
 &lt;div ng-click="vm.logClass('green')" class="box green"&gt;&lt;/div&gt;
    &lt;div ng-click="vm.logClass('blue')" class="box blue"&gt;&lt;/div&gt;
    &lt;div ng-click="vm.logClass('red')" class="box red"&gt;&lt;/div&gt;
    &lt;div ng-click="vm.logClass('yellow')" class="box yellow"&gt;&lt;/div&gt;