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;}<!DOCTYPE html><html lang=en><head>  <meta charset=UTF-8>  <title>Angular Boxes</title>  <link rel=stylesheet href=styles.css></head><body ng-app=angularBoxes ng-controller=angularBoxesCtrl as vm>  <div class=boxHolder>    <div ng-click=vm.logClass($event) class=box green></div>    <div ng-click=vm.logClass($event) class=box blue></div>    <div ng-click=vm.logClass($event) class=box red></div>    <div ng-click=vm.logClass($event) class=box yellow></div>  </div>  <div class=buttonHolder>    <button ng-click=vm.undo()>Undo</button>    <button ng-click=vm.redo()>Redo</button>  </div>  <div class=mainBox ng-class=vm.mainBoxColor></div>  <!-- scripts --><script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js></script><script src=app.js></script></body></html>
Angular Box Color Exercise
javascript;html;css;angular.js;controller
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 <div ng-click=vm.logClass('green') class=box green></div>    <div ng-click=vm.logClass('blue') class=box blue></div>    <div ng-click=vm.logClass('red') class=box red></div>    <div ng-click=vm.logClass('yellow') class=box yellow></div>