Bootstrap tagsinput with angular ng-model issue

Question

I have an angular form that is creating an object with tags:

<form class="form-horizontal">
 <div class="form-group">
  <label>Tags</label>
  <input type="text" id="tags-input" class="form-control" ng-model="beaconData.tag_list" name="beacon[tag_list]" placeholder="project, client 72, yellow, design"/>
 </div>

The id "#tags-input" is calling the tagsinput function as seen here:

$('#tags-input').tagsinput('items');

With the id calling this function the ng-model="beaconData.tag_list" returns undefined. If the tagsinput function is not called the ng-model returns the data with no problem.

Does anyone might have an answer as to why this is happening?

The better question might be what does the tagsinput function do to the input values and why does it not return back to ng-model?

Answer 1

With the help of a coworker, I was able to grab the values of the spans that tagsinput spits out and insert that into my object for saving.

    var tags = angular.element('.form-group div').children('span').map(function (i, s) { return angular.element(s).text(); });