javacriptからモデル配列を更新した後、角度付きチップが機能しない

Question

角チップライブラリ（https://github.com/mohbasheer/angular-chips）を使用してタグエフェクトを生成しています。チップに関連付けられたモデルは、UIから項目を追加または削除すると更新されます。しかし、Javascriptからモデルを変更すると、UIに表示される項目のリストは更新されません。私は基本的な例を追加し、テキストボックスを作成しました。ここでは、ng-changeで配列に要素を追加しています。しかし、配列の更新はUIには表示されません。双方向結合でAngular Chipsを使用する方法はありますか？

以下は、私が試したサンプルコードです。

HTML：

<div ng-app="sample"> 
    <h4>Basic Example</h4> 
    <div ng-controller="basicController as inputdemo"> 
     <chips ng-model="inputdemo.companies"> 
      <chip-tmpl> 
       <div class="default-chip"> 
        {{chip}} 
        <span class="glyphicon glyphicon-remove" remove-chip></span> 
       </div> 
      </chip-tmpl> 
      <input chip-control></input> 
     </chips> 
     <!-- Printing controller value --> 
     <div class="printvalue"> 
      <b>Controller:</b> 
      <div>inputdemo.companies = {{inputdemo.companies}}</div> 
     </div> 
    <input type="text" ng-model="inputdemo.text" ng-change="inputdemo.textChanged()"/> 
    </div> 
    </div> 

CSS：

body{ 
    margin: 10px; 
} 

.loader-container { 
    position: relative; 
} 

.loader-container .loader { 
    position: absolute; 
    right: 50%; 
    bottom: 3px 
} 

.printvalue{ 
    margin: 10px; 
} 

Javascriptを：

(function() { 
    angular.module('sample',['angular.chips']) 
     .controller('basicController', BasicController); 

    function BasicController($scope) { 
     /*for basic example*/ 
     this.companies = ['Apple', 'Cisco', 'Verizon', 'Microsoft']; 

     this.textChanged=function(){ 
     this.companies.push('sample'); 
     }; 
     /*for bootstrap.ui.typeahead example*/ 
     this.availableCompanies = ['ACCO Brands', 
      'Accuquote', 
      'Accuride Corporation', 
      'Ace Hardware', 
      'Google', 
      'FaceBook', 
      'Paypal', 
      'Pramati', 
      'Bennigan', 
      'Berkshire Hathaway', 
      'Berry Plastics', 
      'Best Buy', 
      'Carlisle Companies', 
      'Carlson Companies', 
      'Carlyle Group', 
      'Denbury Resources', 
      'Denny', 
      'Dentsply', 
      'Ebonite International', 
      'EBSCO Industries', 
      'EchoStar', 
      'Gateway, Inc.', 
      'Gatorade', 
      'Home Shopping Network', 
      'Honeywell', 
     ]; 
    } 
})(); 

リンク：

http://codepen.io/anon/pen/LkgWGw

ありがとうございます。

Answer 1

モデルが更新されるたびにangular.copyを使用すると、目的の出力を得ることができます。