<h1>Example: ngMessages / ngMessage</h1>
<p>ngMessagesはメッセージを扱うためのディレクティブです。</p>
<div ng-app="myApp">
  <div ng-controller="myController">
    <input type="text" ng-model="status" ng-change="change()" placeholder="StatusCode">
    <div ng-messages="statusList.messages">
      <p ng-message="200">OK</p>
      <p ng-message="404">Not Found</p>
      <p ng-message="500">Internal Server Error</p>
      <p ng-message="503">Service Unavailable</p>
    </div>
    <p ng-show="!status.length">200, 404, 500, 503のどれかを入力してください。</p>
  </div>
</div>

@import "bourbon";

body {
  padding: 1.5rem;
}

var app = angular.module('myApp', ['ngMessages']);
app.controller('myController', ['$scope', function($scope){
  $scope.statusList = {
    messages: {
      "200": false,
      "404": false,
      "500": false,
      "503": false
    }
  }
  
  $scope.change = function($event){
    angular.forEach($scope.statusList.messages, function(value, key){
      $scope.statusList.messages[key] = false;
    });
    
    if($scope.status in $scope.statusList.messages){
      $scope.statusList.messages[$scope.status] = true;
    }
  }
}]);