AngularJS+jQueryMobileで取得したデータがフォームが反映しない

Question

お世話になります。

AngularJS 1.4.4
jQueryMobile 1.4.5

個人的には正直何が起こるのか把握できないので、AngularJSとjQueryMobileを共存させたくないのですが、お客様が慣れているという希望で併用したいという事が判明して慌ている状態です。

案の定というかフォームが選択されなくて（正確には値は取れてるが反映されなくて）困っております。

大まかにはjQueryMobileで画面が作られています。
AngularJSで$httpのGETでPHPプログラムを呼び出してDBからデータを取得する、流れ自体はありきたりな感じです。

上記GETの戻り（success）でデータは取得されているのは確認できているのですが、テキスト関係以外（SELECTやradioボタン等）が反応せずに困っている状態です。
書いてある部分の抜粋

<fieldset data-role="controlgroup" data-type="horizontal">
  <input id="male" name="sex" type="radio" ng-model="data.sex" value="1" />
  <label for="male">男性</label>
  <input id="famale" name="sex" type="radio" ng-model="data.sex" value="2" />
  <label for="famale">女性</label>
</fieldset>

<select ng-model="data.age" name="age">
  <option value="0">年齢を選択</option>
  <option value="1">10代</option>
  <option value="2">20代</option>
  <option value="3">30代</option>
  <option value="4">40代</option>
  <option value="5">50代</option>
</select>

こんな感じで$scope.data.sexには2が、$scope.data.ageには4が入っています。

jQueryMobileを非読み込みにすると想定通りSELECTもradioも選択されるのでjQueryMobileが何かしてるらしいのは把握できています。

でjQueryMobileでよく言われるAJAXでの非同期関係で何か行けないのかと思ったのですが、そこからどうして良いのか分かりません。

とりあえず試した事は$scope.$apply()でVIEWへ反映させれば良いのかと思ったので、ネットで調べてみてGETでデータを取得した時点で

$scope.data = data;//dataが取得したデータ
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
  $scope.$apply();
}

と言うコードを書いてみたのですが、$digestに引っかかって$scope.$apply()が実行されません。

何かヒントでもあればと思いまして、質問させて頂きます。

宜しくお願い致します。

Answer 1

根本的な解決ではないので引き続き情報が欲しい所ですが、
今回は時間も無いですし、jQueryで$scope.dataの値で選択させる事で対応します。