angularjs - ファクトリー/コントローラーの約束から返された画像のURLでangular ng-srcを更新する方法は?

Question

私のアプリには、1 つのビューから Twitter ハンドルで構成されるユーザー入力を取得し、それをコントローラーを介してファクトリに渡し、そこでいくつかの API 呼び出しが行われるバックエンド コードに送信されるコントローラーがあります。返された画像の URL を取得します。

サーバーから画像の URL を取得することはできますが、別のビューを追加しようとしてしばらくクジラがいます。ここで見つけた $scope やその他のさまざまな提案をいじってみましたが、まだ機能しません。

写真をhtmlビューに補間するために、さまざまなことを試してみました。私は $scope を注入して、それで遊んでみましたが、まだサイコロはありません。$scope を使用しないようにしています。私が理解していることから、$scope を悪用せず、代わりに使用し、ビューでthisコントローラー エイリアス ( controllerAs) を使用する方がよいからです。

コントローラーに返された約束がビューに表示したい imageUrl であることを確認できますが、どこが間違っているのかわかりません。

私のコントローラーコード:

app.controller('TwitterInputController', ['twitterServices', function (twitterServices) {
  this.twitterHandle = null;
  // when user submits twitter handle getCandidateMatcPic calls factory function
  this.getCandidateMatchPic = function () {
    twitterServices.getMatchWithTwitterHandle(this.twitterHandle)
      .then(function (pic) {
        // this.pic = pic
        // console.log(this.pic)
        console.log('AHA heres the picUrl:', pic);
        return this.pic;
    });
  };
}]);

これが私の工場コードです：

app.factory('twitterServices', function ($http) {
  var getMatchWithTwitterHandle = function (twitterHandle) {
    return $http({
      method: 'GET',
      url: '/api/twitter/' + twitterHandle
    })
    .then(function (response) {
      return response.data.imageUrl;
    });
  };
  return {
    getMatchWithTwitterHandle: getMatchWithTwitterHandle,
  };
});

これは私のapp.jsです

var app = angular.module('druthers', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
  .state('/', {
    url: '/',
    templateUrl: 'index.html',
    controller: 'IndexController',
    controllerAs: 'index',
    views: {
       'twitter-input': {
        templateUrl: 'app/views/twitter-input.html',
        controller: 'TwitterInputController',
        controllerAs: 'twitterCtrl'
      },
       'candidate-pic': {
        templateUrl: 'app/views/candidate-pic.html',
        controller: 'TwitterInputController',
        controllerAs: 'twitterCtrl'
      }
    }
  });
});

返された画像のURLを追加したいビューは次のとおりです

<div class="col-md-8">    
  <img class="featurette-image img-circle" ng-src="{{twitterCtrl.pic}}"/>
</div>