Monaca+AngularJS ドロップダウンメニューの操作

###Monaca+AngularJS ドロップダウンメニューの操作
お世話になります。

Monaca+AngularJSで、複数のドロップダウンメニューを動的に作成する必要があるため
javascriptで作成したものをinnerHTMLで書き出して、そこまでは問題ないのですが
各ドロップダウンメニューにデフォルト値をセットするために
ドロップダウンメニュー配列として操作したいので以下のソースのように「ng-model」に指定する変数を配列にしましたが、うまく動作しません。

（ドロップダウンメニューのデフォルト値は $scope.cart_selectedItem[0] = "1"; と、すべて１で指定していますが、実際の運用ではデータベースから読み出してセットします）

動的に作成したドロップダウンメニューを配列として操作するためにはどうすればいいのでしょうか。
よろしくお願いいたします。

###該当のソースコード

    $scope.cart_init = function(){
        for(var i=0; i<30; i++){
            s = s + '    <select class="fontcart" name="quantity" id="cart_suryo' + i + '" ng-model="cart_selectedItem[' + i + ']" ng-change="cart_selectsuryo();">';
            s = s + '      <option value="1">1</option>';
            s = s + '      <option value="2">2</option>';
            s = s + '      <option value="3">3</option>';
            s = s + '      <option value="4">4</option>';
            s = s + '      <option value="5">5</option>';
            s = s + '      <option value="6">6</option>';
            s = s + '      <option value="7">7</option>';
            s = s + '      <option value="8">8</option>';
            s = s + '      <option value="9">9</option>';
            s = s + '      <option value="10">10</option>';
            s = s + '    </select>';
        }
        $timeout(function(){
            element = document.getElementById("id_cart_shohin");
            element.innerHTML = s;
            ons.compile(element);

            $scope.cart_selectedItem[0] = "1";
        });
    }