Angular: Rendering FB buttons

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/0.10.6/angular-0.10.6.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>

<input type="text" ng:model="newId" />
<button ng:click="entries.push(newId)">ADD</button>
{{entries}}

<div ng:repeat="id in entries">
    <fb:like ng:href="http://www.test.com/index.html#/{{id}}" layout="button_count" show_faces="false" width="240" height="40" action="like" colorscheme="light" fb:init></fb:like>
    <button ng:click="entries.splice($index, 1)">REMOVE</button>
</div>

JavaScript

// simple FB directive
angular.directive('fb:init', function() {
    return function(elm) {
        // init fb button on given element
        FB.XFBML.parse(elm[0].parent);
    };
});

function Main() {
    // init some data
    this.entries = ['1', '2'];
}


// init FB SDK, which is loaded sync
// better to load async, but then the directive needs to handle the case,
// when linking before fb loaded (adding to queue, that fb will process afterwards)
FB.init({
    appId: '257764950929824',
    status: true,
    cookie: true,
    xfbml: true
});