angular.js controller as syntax template binding using $template cache service

Question

i have already used angular js before but now i am using controller as syntax in angular js and i am not able to bind template.

My controller code:

(function () {
    angular.module("vkApp")
           .controller("Feeds", Feeds);
    function Feeds(FeedSetting, FeedLoader, $templateCache, $compile) {
        var vm = this;

        FeedSetting.initializeSetting(vm);
        //functions declaration
        vm.addFeed = addFeed;

        // function implementations
        function addFeed(text) {
            return FeedLoader.loadFeed("http://rss.cnn.com/rss/edition_world.rss")
                       .then(function (feedData) {
                           console.log(feedData.data.responseData.feed);
                           vm.feedList = feedData.data.responseData.feed;
                           var feedTemplate = $templateCache.get("feedTemplate");
                           feedTemplate.then(function (markup) {
                               $compile(markup.data)(vm).appendTo(angular.element("#FeedArea"));
                           });
                           return vm.feedList;
                       });
        }
    };

})();

My template is:

  <h7>{{feed.feedList.title}}</h7>

feed.html page:

<div id="rightSide" ng-controller="Feeds as feed">
     <div class="news-feed-wrapper" id="FeedArea">
     </div>
</div>

when the binding is performed it gives me error in console

Answer 1

You need to make couple of changes

1)Replace this line

$compile(markup.data)(vm).appendTo(angular.element("#FeedArea"));

with

$compile(markup.data)($scope).appendTo(angular.element("#FeedArea"));

because behind the scene your custom variable vm bind with Angular $scope. So $compile would work the same like it was using classic controller with $scope syntax

2) And in your binding replace

<h7>{{feed.feedList.title}}</h7>

with

<h7>{{vm.feedList.title}}</h7>

3) And inside Feed.html

ng-controller="Feeds as feed" 

should be

ng-controller="Feeds as vm"

After the above changes it should work.