MD form issues

<!DOCTYPE html>
<html ng-app="myPlunk" ng-strict-di="">

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>MD Template</title>
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes" />
   <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
   <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="AppController as appVm">
    <form name="enterCreditsForm" novalidate>
        <div>
            <label translate>ENTER TOTAL AMOUNT</label>
                <input name="credits" type="number"
                       ng-model="buyCreditsCtrl.creditsWorth" min=400 required>
                <div ng-messages="enterCreditsForm.credits.$error">
                    <div ng-message="required">
                        This can't be left blank
                    </div>
                    <div ng-message="min">
                      Min is 400
                    </div>
                </div>
        </div>
    </form>
   <md-content class="no-padding" ng-controller='NawController as vm'>
      <md-card class='no-padding'>
         <md-content class='md-padding'>
            <form name='naw' novalidate>
               <div class="row">
                  <md-input-container>
                     <label>Credits</label>
                     <input ng-model='vm.naw.achternaam' type='number' min=400 name='credits' required>
                     <div ng-messages="naw.credits.$error" md-auto-hide="false" ng-show="naw.credits.$touched">
                       <div ng-message="required">This is required</div>
                       <div ng-message="min">Min is 400</div>
                     </div>
                  </md-input-container>
               </div>
            </form>
         </md-content>
      </md-card>
   </md-content>



   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
   <script src="//code.angularjs.org/1.3.10/i18n/angular-locale_nl-nl.js"></script>
   <script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
   <script src="script.js"></script>
   <script src="texts.js"></script>
</body>

</html>

(function() {
   "use strict";
   //Use an IIFE

   AppController.$inject = ['texts']
   function AppController(texts) {
      this.version = angular.version.full + " " + angular.version.codeName;
   }
   
   function NawController() {
      var vm= this;
      vm.naw = {};
   }



   //Hook up all my function into angular
   angular.module('myPlunk', [
      'ngMaterial',
      'ngMessages',
   ])
      .controller('AppController', AppController)
      .controller('NawController', NawController);

}());

/* Styles go here */

.title {
    color: #fff;
    padding-left: 10px;
    padding-bottom: 3px;
    font-weight: normal;
    margin:0;
}

<div ng-message="required">{{texts.verplichtveld}}</div>
<div ng-message="email">{{texts.emailerr}}</div>

(function () {
   
   angular
      .module('myPlunk')
      .service('texts',texts);
      
      texts.$inject = ['$rootScope'];
      function texts($rootScope) {
         var service   = this;
         service.texts = {};
         extraTexts(); 
         
         // this is an app-wide (readOnly) texts object, exposing it on rootscope
         // makes it easy to use them in my templates.
         $rootScope.texts = service.texts;
         
         
         return service;
         ////
   
   
           function extraTexts() {
            var t = {
                afspraakvoor:    'Ik wil een afspraak maken voor een:',
                vorige:          'vorige stap',
                geenvoorkeur:    'Geen voorkeur',
                kiesgeslacht:    'Klik of druk op uw keuze',
                kiesbehandel:    'Kies uw behandelingen',
                kiestijd:        'Selecteer een tijd',
                kiesnaw:         'Uw gegevens',
                kiesklaar:       'Klaar!',
                opmerking:       'opmerking',
                maakasp:         'Maak afspraak',
                settings:        'instellingen',
                momentdatum:     'Moment, beschikbare datum wordt bepaald',
                momenttijd:      'Moment, beschikbare tijd wordt bepaald',
                momentboek:      'Moment, afspraak wordt geboekt',
                teruglink:       'Klik hier om terug te keren naar de salonwebsite',

                afspraakgemaakt: 'Afspraak gemaakt.',
                afspraakmislukt: 'Afspraak maken mislukt',
                naw_naam:        'Achternaam',
                naw_vl:          'Voorletters',
                naw_adres:       'Adres',
                naw_pc:          'Postcode',
                naw_pl:          'Woonplaats',
                naw_tel:         'Telefoonnummer',
                naw_email:       'E-mail adres',

                verplichtveld:   'Dit is een verplicht veld',
                emailerr:        'This does not seem to be a valid email address'
            };


            angular.extend(service.texts, t, service.texts);
        }
        
      }
}());