Angularjs, search form, factory: Button doesn't work - forms

Question

I have a typical form-with-query-editor and search button im my Angularjs-app. However, clicking the search-button doesn't work. If I initially open the form with the table, the service works. But not when clicking the search button. The code is as follows:
HTML vlist.html:
<input ng-model="nachname" type="text" id="nachname" name="nachname" class="search-query" />
<button ng-click="search()" type="submit" class="btn btn-primary">Search</button>
...
<tr ng-repeat="pers in personen">
<td>{{pers.nachname}}</td>
</tr>
...
Controller:
var app = angular.module( 'cdemoApp', [ 'cdemo.services' ] );
app.config( ['$routeProvider', function( $routeProvider ) {
$routeProvider.
when( '/vlist', {
controller: 'VListCtrl',
resolve: {
personlistdto: function( VListLoader ) {
return VListLoader();
}
},
templateUrl : 'app/view/vlist.html'
} ).otherwise( { redirectTo: '/' } );
} ] );
app.controller( 'VListCtrl', [ '$scope', 'personlistdto',
function( $scope, personlistdto ) {
$scope.search = function(){
$scope.personen = personlistdto.aaData;
$scope.iTotalRecords = personlistdto.iTotalRecords;
};
$scope.search();
}]);
Service:
var services = angular.module( 'cdemo.services', [ 'ngResource' ] );
services.factory( 'Vers', [ '$resource',
function find( $resource ) {
return $resource( '/cdemo/rest/vers/ajs/:id',
{ id: '#id', isArray: false }
);
} ] );
services.factory( 'VListLoader', [ 'Vers', '$q',
function( Vers, $q ) {
console.log('Vloader1');
var find = function find() {
var delay = $q.defer();
Vers.get( function( personlistdto ) {
delay.resolve( personlistdto );
}, function() {
delay.reject( 'Nix fetch' );
} );
return delay.promise;
};
return find;
} ] );
Any idea how I can get the button searching (including fields/parameters) - because nothing happens when clicking the button? Thanks for an answer.

Answer 1

I got it working by changing the controller like this:
app.controller( 'VListCtrl', [ '$scope', 'personlistdto', 'VListLoader',
function( $scope, personlistdto, VListLoader ) {
$scope.personlistdto = personlistdto;
$scope.searchFactory = VListLoader;
$scope.search = function( ){
$scope.personlistdto = $scope.searchFactory();
};
}
] );
This way the Factory VListLoader is called.