Getting values from an object into ng-model

Question

I have resource that gets an object:

.factory('Product', ['$resource', function($resource) {
    return $resource( 'api/product/:id', { Id: '@Id' }, { 
            update: { method: 'PUT', isArray: false }
        });
}])

I call this resource from the ng-route, in the /edit/product/:sku using 'resolve'

.config(['$routeProvider',  function($routeProvider) {
  $routeProvider.
    when('/index', {
      templateUrl: 'lord/partials/main'
    }).
    when('/product/edit/:SKU', {
      controller: 'EditCtrl',
      templateUrl: function(params){ return 'lord/partials/product/edit' },
      resolve: {
        product: function( Product, $routeParams ){
            return Product.get({ id: 101 }).$promise;
        }
      }
    }).
    otherwise({
      redirectTo: '/index'
    });
}]);

In my controller, I receive product successfully:

.controller('EditCtrl', ['$scope', 'product',  function ($scope, product) {

 console.log(product.measures);  // I get the object -> Object {weight: 100, length: 200, width: 180, height: 200}   

//Initialize object:
$scope.datos = {};
$scope.datos.measures = {};

However, when i want to "copy" that object to a scope variable, it doesn't work. The scope variable is $scope.datos, which is an object, in a form. I populate this object like this:

      <div class="col-md-1">Peso</div>
      <div class="col-md-2">
       <div class="input-group">
        <input type="number" class="form-control" ng-model="datos.measures.weight" >
        <span class="input-group-addon">gr</span>
      </div>
      </div>
      <div class="col-md-1">Largo</div>
      <div class="col-md-2">        
       <div class="input-group">
        <input type="number" class="form-control" ng-model="datos.measures.lenght">
        <span class="input-group-addon">cm</span>
      </div>
      </div>
      <div class="col-md-1">Ancho</div>
      <div class="col-md-2">
      <div class="input-group">
        <input type="number" class="form-control" ng-model="datos.measures.width">
        <span class="input-group-addon">cm</span>
      </div>

      </div>
      <div class="col-md-1">Alto</div>
      <div class="col-md-2">
      <div class="input-group">
        <input type="number" class="form-control" ng-model="datos.measures.height">
        <span class="input-group-addon">cm</span>
      </div>

I tried, in the controller, several methods to copy the value that I receive into the object.

I tried:

angular.copy(product.measures,$scope.datos.measures);

And:

$scope.datos.measures = angular.copy(product.measures);

And:

$scope.datos.measures = product.measures;  
$scope.datos.measures.weight   =  product.measures.weight;

And none of these worked.

However, assigning the product.measures.width into any variable, like $scope.dwidth, works. But this is not what I want, since my object is far more complex.

How can I get to copy the values of the object I receive (product.measures) into another object ($scope.datos.measures) and reflect that value in the with ng-model?

Thank you.

Answer 1

I was able to determine what was happening. I was calling another controller that was resetting these values.

So the route controller was called (EditCtrl) but after that, the controller in the page reset the values.

After that, it was enough with the following code:

angular.copy(product.measures,$scope.datos.measures);

That made the trick and copied the whole object.

Also, I had to change tue $scope.datos.measures.length name to $scope.datos.measures.len due to the Javascript property.