Change Color

by Rob Rothe

HTML

<div ng-app="app">
  <div ng-controller="ColorsCtrl as ctrl">
    <div ng-repeat="color in ctrl.colors">
      <input type="radio" id="{{color}}" name="color" ng-click="ctrl.changeColor(color)">
      <label for="{{color}}">{{color}}</label>
    </div>
    <div ng-class="ctrl.colorSelected" class="box">
      Stuff Here
    </div>
    <div ng-class="ctrl.colorSelected" class="box">
      Stuff Here
    </div>
  </div>
</div>

CSS

.box {
  padding: 10px;
  border: 1px solid #999;
  margin: 20px;
}

.Red {
  background: red;
}

.Green {
  background: green;
}

.Pink {
  background: pink;
}

JavaScript

angular
  .module('app', [])
  .controller('ColorsCtrl', ColorsCtrl);

function ColorsCtrl() {
  var self = this;
  self.colors = ['Red', 'Green', 'Pink'];
  self.changeColor = changeColor;

  function changeColor(color) {
    self.colorSelected = color;
  }
}