<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="AppController">
<button class="btn">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i> button
</button>
<button class="btn">
<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i> button
</button>
<button class="btn">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i> button
</button>
<button ng-click="autoScroll = !autoScroll">Toggle autoScroll</button>
</body>
</html>
// Code goes here
var app = angular.module('plunker', []);
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.autoScroll = true;
}
]
);
/* Styles go here */
.icon-autoscroll {
display: inline-block;
background-color: green;
}
.icon-autoscroll-disabled {
display: inline-block;
background-color: red;
}