JQuery Mobile with AngularJS Buttons not rendering properly

Question

Using jQueryMobile and AngularJS, I started a test project. Being new to both, and, as well new to client side, looking forward help from experts...

In an singlePage app, when I navigate from mainPage (has 3 listItems as Row1, Row2, and Row3( data from $$scope.rowDataArray), it render a page with colored buttons Green and Red based on the values from the controller's $scope.billTblModel.rows via DIRECTIVE-Template

During 1st time navigation i.e. from mainPage to the ButtonPage, it renders buttons nicely as JQuery way meaning, it has rounded corners, data-theme etc, BUT, when I go back to the mainPage and redo the same navigation, BUTTONS looses it jQMobile type rendering and became tiny simple buttons as defined by template-directives.

Please help me rendering button either JQueryMobile way OR AngulajS(template-directive)way

For code, please refer PLUNKER Link: http://plnkr.co/edit/s7h3SNMyu877kB7vFbzV?p=preview

code snippet as follows: HTML: (directive fundoo-rating with data from the controller)

<div data-role="page" id="dashBoardPageId">
   <div data-role="content"  id="dashBoardIdIdContent" >        
    <div fundoo-rating row-item-index="listItemIndex" rating-value="rating" on-rating-selected="saveRatingToServer(rating, ratingTextVal)" item-data="billTblModel" >
    </div>
  </div>
</div>

/---------------------------- Directive as follows:

.directive('fundooRating', function ()
{

    return{
          restrict: 'A',
          template:     '<div>'+
                        '<ul  data-role="listview">' +
                          '<li id="listViewId" ng-repeat="star in stars" ng-click="toggle($index)">' +                          
                            '<span ng-if="star.filled==true" > '+
                                '<div data-role="button" data-theme="c" style="background-color:#5CE65C; border: 1px solid #000000;">{{star.btnTitle}}</button>' +
                                '</div>'+
                            '</span>'+
                            '<span ng-if="star.filled==false" > '+
                                '<button data-theme="e" style="background-color:#FF6666; border: 1px solid #000000;" >{{star.btnTitle}}</button>' +
                            '</span>'+                        
                          '</li>' +
                        '</ul>'+                    
                    '</div>',


        scope: {
            rowItemIndex: '=',
            ratingValue: '=',
            readonly: '@',
            onRatingSelected: '&',
            itemData: '=',      
        },

        link: function (scope, elem, attrs)
        {
                 ....scope.toggle = function(index){}
                 scope.$watch('ratingValue', function( newVal, oldVal) {
                    console.log("### ratingValue >>>OldVal: "+JSON.stringify(oldVal) +" " + "newVal: "+JSON.stringify(newVal));
                  if (newVal!= oldVal) {                    
                    updateStars();
                  }
                  //setTimeout(function(){$scope.$on('$viewContentLoaded', elem.trigger("create"))},1);
                });
                }