title: Angular JS set form field as invalid
body: <p>I am trying to add some server side form validation to my angular js app. I'm having a hard time invalidating the form field and displaying the error message. </p>
  
  <p>My basic application looks like this:</p>
  
  <p>I have a model 'client' with a controler</p>
  
  <pre><code>Accounts.controller('Client', ['$scope', 'ClientService', function ($scope, ClientService) {
      $scope.loading = false;
      $scope.errors = null;
  
      $scope.init = function () {
           $scope.abn = "some value from API call";
      };
  
      $scope.save = function (client) {
              $scope.form.abn.$setValidity("server", false);
              $scope.errors.abn = "Error message";
      }
  
      $scope.init();
  }]);
  </code></pre>
  
  <p>and a form view</p>
  
  <pre><code>&lt;form name="form"&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;ABN Number&lt;/label&gt;
          &lt;input type="text" name="abn" ng-model="client.abn"&gt;
          &lt;span ng-show="form.abn.$error.server"&gt;{{client.errors.abn}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;button ng-click="save(client)"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and an app like so</p>
  
  
  
  <pre><code>var Accounts = angular.module('Accounts', [
      'ngRoute',
      'ui.select2',
      'ui.router'
  ])
  .config(function ($stateProvider, $routeProvider) {
      $routeProvider.otherwise('/404');
  
      $stateProvider
          .state('client', {
              url: "/client",
              templateUrl: "client",
              controller: 'Client'
          })
          .state('404', {
              url: "/404",
              templateUrl: "/error/e404/"
          });
  
  });
  </code></pre>
  
  <p>Is someone able to provide me with an example of how I should be setting the abn field as invalid and displaying an error message?</p>