I have an app that switches views with ng-switch, while switching views my tagging input specifically loses its value and falls into its object string, none of my other inputs suffer this issue:

HTML:
<input ui-select2="version2"
id="keywordsGlobal"
name="keywordsGlobal"
class="region-keywords input-xlarge"
data-ng-model="data.keywordsGlobal"
required-multiple />
JSON:
[
{
"id":"[object Object]",
"text":"[object Object]"
}
]
Is there any way to prevent this specifically?
I had all kinds of problems with ui-select2, and just wrote a simple custom directive and everything worked. If anyone else is running into problems with angular, select2, and tagging, I'd recommend giving it a try. What worked for me is a template like:
<input type="text" tag-list ng-model="item.tags">
Note that item.tags is a javascript array, not a string of comma separated tags or anything like that. Used with a custom directive (that doesn't use ui-select2, just select2):
app.directive('tagList', function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attrs, controller) {
scope.$watch(attrs.ngModel, function(value) {
if (value !== undefined) {
element.select2('val', value);
}
});
element.bind('change', function() {
var value = element.select2('val');
controller.$setViewValue(value);
});
$timeout(function() {
element.select2({
tags: []
});
});
}
};
});
The data didn't appear to be loaded correctly on subsequent loading of the select. Using initSelect() and manually re-assigning the data to the select appears to fix the issue.
Take a look at http://jsfiddle.net/qdrjk/111/
$scope.version2 = {
tags : null,
initSelection: function(elem, callback) {
console.log(elem);
var data = $scope.data.keywordsGlobal;
callback(data);
},
createSearchChoice : function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id : term,
text : term
};
}
}
}