Angular表单验证，保存按钮总是禁用的

我有一个有棱角的表单，其中问题在数组中指定。

HTML格式如下:

<form ng-controller="SupplierController" name="newSupplierForm">
  <p>Enter details for the new Supplier. The new supplier will be added to category {{selectedCategory.description}}</p>
  <p ng-repeat="field in formfields">
     <label class="field" for="{{field.name}}" ng-hide="newSupplierForm.{{field.name}}.$dirty && (newSupplierForm.{{field.name}}.$error.required || newSupplierForm.{{field.name}}.$invalid)">{{field.caption}}</label>
     <label class="error" for="{{field.name}}" ng-show="newSupplierForm.{{field.name}}.$dirty && (newSupplierForm.{{field.name}}.$error.required  || newSupplierForm.{{field.name}}.$invalid)">{{field.caption}}</label>
     <input type="{{field.type}}" name="{{field.name}}" ng-model="newSupplier[field.name]" ng-required="{{field.required}}">    
  </p>
  <button ng-disabled="newSupplierForm.$invalid" ng-click="saveSupplier()">Save</button>
</form>

控制器是:

financeApp.controller('SupplierController', function($scope, $http) {
$scope.formfields = [
    {caption:'Name :', name:'name', required:"true", type:"text"},
    {caption:'Address :', name:'address1', required:"true", type:"text"},
    {caption:' :', name:'address2', required:"true", type:"text"},
    {caption:' :', name:'address3', required:"", type:"text"},
    {caption:' :', name:'address4', required:"", type:"text"},
    {caption:'Post Code :', name:'postcode', required:"", type:"text"},
    {caption:'Email :', name:'email', required:"", type:"email"},
    {caption:'Phone :', name:'phone', required:"", type:"text"}
];
$scope.newSupplier = {};
$scope.saveSupplier = function() {
    $http.post('/finance/supplier', newSupplier).success(function(data) {
        alert(data);
    });     
}
});

这一切似乎都正常工作，除了保存按钮从未启用，即使表单是有效的。到目前为止，我所做的研究表明这应该是可行的，但事实并非如此。

我做错了什么?

还有，有没有什么方法可以改进这段代码?这是我第一次尝试使用Angular。