<!DOCTYPE html>
<html ng-app="app" >

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
    <!-- 検索条件 -->
    <div ng-controller="SearchConditionCtrl">
      <form name="conditionForm" >
        <input name="inputCd" 
               type="text" 
               ng-model="condition.cd" 
               ng-maxlength="3"
               ng-pattern="/^\d+$/"
               ng-class="{'has-error':conditionForm.inputCd.$invalid}"
               required />
        {{conditionForm.inputCd.$error}}
        <div ng-show="conditionForm.inputCd.$error.required" >空だぜー</div>
        <div ng-show="conditionForm.inputCd.$error.maxlength" >超えたぜー</div>
        <div ng-show="conditionForm.inputCd.$error.pattern" >数字しかだめよ</div>
      </form>
    </div>
    
    <!-- 絞り込み結果 -->
    <div ng-controller="SearchResultCtrl">
      <ul>
        <li ng-repeat="item in list | filter:condition.cd" >
          {{item.cd}}:{{item.nm}}
        </li>
      </ul>
    </div>
    
  </body>

</html>
(function(){

"use strict";

// create services
angular.module("services",[]);

var Condition = function(){
  this.cd = "";
  this.nm = "";
};
angular.module("services").
  service("condition",Condition);
  
var Result = function(){
  this.list = [
    {cd:"101", nm:"nobio"},
    {cd:"102", nm:"suneta"},
    {cd:"103", nm:"sizuyan"}
  ];
};
angular.module("services").
  service("result",Result);

// create controllers
angular.module("controllers",[]);

angular.module("controllers").
  controller("SearchConditionCtrl", function(
    $scope, condition, result ){
      $scope.condition = condition;
      
  });

angular.module("controllers").
  controller("SearchResultCtrl", function(
    $scope, condition, result ){
      $scope.condition = condition;
      $scope.list = result.list;
    });

// application boot!
angular.module("app",["controllers","services"]);

  
})();

html,body {
  background-color:white;
}
body{
  padding: 8px;
}

input[type="text"]{
  font-size: 1.4rem;
  border-radius:4px;
}

ul {
  padding: 4px;
}
li {
  padding:4px;
  list-style: none;
  margin:4px;
  border-bottom: 1px solid rgba( 100, 100, 100, 0.4);
}

.has-error{
  background-color:lightyellow;
  border-color: red;
}