AngularJS-ng-init无法与$ resource和ng-repeat一起使用

Question

Good afternoon everybody, since I haven't found any solution to my problem, I'm here =X Here's the deal: I'm trying to initilize a ng-model using the ng-init calling a function, but in this function im using a custom $resource method. Now comes the problem, ng-init does not wait the promise to be resolved to assign the value to the model, it passes right over it and since the promise isn't resolved is assigns undefined to it. Here are the codes:

Html with inputs and ng-repeat:

<tr ng-form="itemsForm" ng-repeat="item in items">
                <td>
                  <div class="has-feedback"
                    ng-class="{
                        'has-error': itemsForm.product.$invalid && itemsForm.product.$dirty,
                      'has-success': itemsForm.product.$valid   && itemsForm.product.$touched
                    }">
                    <input type="text" typeahead-editable="false" typeahead-min-length="3" typeahead-no-results="noResultsProduct" required name="product" placeholder="Digite o codigo ou Descrição" class="form-control input-sm" id="product" typeahead-on-select="item.prod_code = product.codigo; updateFields(product)" ng-model="product" ng-init="product=item.prod_code; product=find_product(item.prod_code)" uib-typeahead="product as (product.descricao + ' - ' + product.codigo) for product in getProducts($viewValue) | orderBy:'descricao' | limitTo:15"/>
                    <p class="help-block" ng-messages="itemsForm.product.$error">
                      <span ng-message="required">Produto não informado.</span>
                      <span ng-if="noResultsProduct">Nenhum Produto encontrada.</span>
                    </p>
                  </div>
                </td>

Function that ng-init calls:

$scope.find_product = function(product) {
  if (product != null){
    console.log("Started");
    ProductService.find_by($scope.company_id,product).$promise.then(function(data) {
      console.log(data.products);
      return data.products;
    });
    console.log("Finished");
  }
}

Service function:

angular.module("application").service('ProductService',['$resource','$http', function($resource,$http){

this.products = function(company_id, search_filter){
  var services_product = $resource('/services_product/all',
                           {},
                           { "all": { "method": "POST" }});
  return services_product.all({"company_id": company_id, "search_filter": search_filter});
};

this.find_by = function(company_id, search_filter){
  var services_product = $resource('/services_product/find_by',
                           {},
                           { "find_by": { "method": "POST" }});
  return services_product.find_by({"company_id": company_id, "search_filter": search_filter});
};

} ]);

Whats is being printed in the console:

Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000028        ", descricao: "57 - PRENSA CABO STECK BSP- 1/2 - COD.                                          ", tipo: "MP", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000028        ", descricao: "57 - PRENSA CABO STECK BSP- 1/2 - COD.                                          ", tipo: "MP", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000022        ", descricao: "61 - VIGA PINUS 2 POL X 1 POL - 4M                                              ", tipo: "EM", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "10000105       ", descricao: "61 - TABUA PINUS 3 POL X 20MM - 4000MM                                          ", tipo: "EM", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000033        ", descricao: "CABO CONTROLE VEIAS NUMER.CL5 6X1,5 MM  1 KV                                    ", tipo: "MP", unidade: "MT"…}

I'm doing with 5 items, As you can see, he is only getting the data after everything executed. Appreciate any help =))

Answer 1

Instead of returning "data.products" in promise callback, you should assign data.products to item.product.

$scope.find_product = function(item) {
    if (product != null){
        console.log("Started");
        ProductService.find_by($scope.company_id,item.prod_id).$promise.then(function(data) {
            console.log(data.products);
            item.product = data.products;
        });
        console.log("Finished");
    }
}

HTML

<input type="text" typeahead-editable="false" typeahead-min-length="3" typeahead-no-results="noResultsProduct" required name="product" placeholder="Digite o codigo ou Descrição" class="form-control input-sm" id="product" typeahead-on-select="item.prod_code = product.codigo; updateFields(product)" ng-model="item.product" ng-init="find_product(item)" uib-typeahead="product as (product.descricao + ' - ' + product.codigo) for product in getProducts($viewValue) | orderBy:'descricao' | limitTo:15"/>