Angucomplete-altの積みどころ #JavaScript

AngularJSでオートコンプリートを実装しようとした時に
https://github.com/ghiden/angucomplete-alt
を使用したのですが、使い方がちょっとわかりづらかったのでこれから使う方のためにまとめておきます。

Angucomplete-altとは

Angucomplete-altは<angucomplete-alt/>というタグを入れるだけで簡単にオートコンプリートを実装できるというものです。しかし、オートコンプリートは簡単に実装できますが、そのデータの扱いが少し複雑で積みました。

具体例

ここで、配列要素をng-repeatで繰り返してそこにこのオートコンプリートを実装します。

hoge.html

<div ng-repeat="hoge in hoges">
  <angucomplete-alt id="huga" selected-object="selectedFn" remote-url="/hoge?q=" title-field="hoge" input-changed="changedInput"/>
</div>

このコードでオートコンプリート自体は完成です。これで入力した文字が自動的にurlのqパラメータに代入されGETリクエストを送りオートコンプリートを表示します。
選択されたデータはselected-objectに渡されます。selected-objectには関数をかけます。ここでは関数を書いています。

ここで一つ罠があってselected-objectにhoge.hugaなどと書いてもそこにバインドされません。また、オートコンプリートを利用せずにそのまま文字を書き込んだ場合はselected-objectに指定された変数、関数に値が渡されません。
そこで下記のようにJSのコードを書いてhogeないの特定データに値が代入されるようにします。

controllers.js

$scope.selectedFn = function($item){
  $scope.hoges[this.$parent.$index].huga = $item.title;
}

$scope.changedInput = function(huga){
  $scope.hoges[this.$parent.$index].huga = huga;
}

上のselectFnではオートコンプリートが選択された時に呼ばれる関数でselected-objectの値に設定しています。
下のchangedInputはテキストフィールドないの文字列が変化した時に呼ばれる関数でinput-changedの値に設定しています。ちなみにこの$item.titleにはtitle-fieldで指定したレスポンスのプロパティが入っています。

両関数とも入力データをhoge内のhugaプロパティに代入しています。

結論

これが正しい方法なのかはわかりませんが、angucomple-altは少しめんどくさい実装をしなければならなかったのでまとめておきました。
他にやり方があれば教えて下さい。