Using an array of objects with ng-model

[gaboAcosta]

Hello, I have a angular-ui select2 like this:

<label>Categoría(s)</label>
        <select ui-select2 ng-model="servicio.categoria"  data-placeholder="Seleccione las categorias" multiple class="photo_select">
            <option ng-repeat="category in categories" value="{{category}}">{{ category.nombre }}</option>
        </select>

The model is exactly this:

{"id":186,"nombre":"Test","categoria":[{"id":11,"nombre":"Bodas"},{"id":12,"nombre":"Grupos"}],"descripcion":"<p>desc<\/p>","fotos":["1385525_10152045795152009_436566997_n.jpg","1912-so-much-win_inline.jpg"],"archivos":["aaa.txt","robots.txt"],"orden":null}

And the option list in the controller is this:

[{"id":11,"nombre":"Bodas"},{"id":12,"nombre":"Grupos"}]

But it doesn't seem to be pairing them correctly, as far as I can see that's the way I should do it, if not, I swear I haven't found how :(

[nabils]

Hi. Did you find a solution for this? I am having the same problem. Not sure if it is supported.

[jbalbuena]

Try making it a JSON string? AFAIK, select's value is a string, so try stringifying your ng-model first.

[gnomeontherun]

The only solution I've found is to create a separate model and $watch it for changes. Its not ideal, but it is a viable workaround. This is an outline of the logic I used.

// List of options
$scope.categories = [{id: 11, name: 'Category 11'}, {id: 12, name: 'Category 12'}];
// Real model
$scope.category = {id: 11, name: 'Category 11'};
// Create a new model and bind this as the ng-model. Set the default value based on whatever conditions.
$scope.temporaryCategory = 11;
// Watch the temporaryCategory, and push to real model
$scope.$watch('temporaryCategory', function (newValue, oldValue) {
  if (newValue) {
    angular.forEach($scope.categories, function (category) {
      if (category.id == newValue) {
        $scope.category = category;
      }
    });
  } 
});

<select ui-select2 ng-model="temporaryCategory"  data-placeholder="Select a category">
    <option ng-repeat="category in categories" value="{{category.id}}">{{ category.name }}</option>
</select>