<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="angular-messages@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-messages.js"></script>
<script data-require="angular-aria@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-aria.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="AriaPlunker">
<h1>Hello Plunker!</h1>
<div data-ng-controller="AriaPlunkerController">
<div data-ng-messages="ariaMessages">
<div data-ng-message="test">{{testLiveText}}</div>
</div>
<button data-ng-click="ariaMessages.test = !ariaMessages.test">Toggle</button>
</div>
</body>
</html>
// Code goes here
angular.module('AriaPlunker', ['ngAria', 'ngMessages'])
.controller('AriaPlunkerController', function($scope, $element) {
$scope.testLiveText = "Testing";
$scope.ariaMessages = {
test: false
};
});
/* Styles go here */