run jQuery codes on ng-bind-html

I have an variable which contain some HTML+CSS+JavaScript codes Like this:

<ul class="tabs">
   <li data-tab="tab1">Item 1</li>
   <li data-tab="tab2">Item 2</li>
</ul>
<div id="tab1"></div>
<div id="tab2"></div>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
<script>
$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})
</script>

now I want run this code in my page so in template I wrote :

<ion-view>
    <ion-content >
        <div ng-bind-html="data"></div>
    </ion-content>
</ion-view>

and in my controller I wrote:

$scope.data = $sce.trustAsHtml(that variable);

Ok, every thing is ok and all CSS and HTML will load, but javascript code cannot work, so I search in Google and found this code: http://jsfiddle.net/NWZZE/6/

so I changed my code and add directive like this:

.directive('compile', ['$compile', function ($compile) {
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    // watch the 'compile' expression for changes
                    return scope.$eval(attrs.compile);
                },
                function(value) {
                    // when the 'compile' expression changes
                    // assign it into the current DOM
                    element.html(value);

                    // compile the new DOM and link it to the current
                    // scope.
                    // NOTE: we only compile .childNodes so that
                    // we don't get into infinite loop compiling ourselves
                    $compile(element.contents())(scope);
                }
            );
        };
    }])

and then use compile instead of ng-bind-html but my javascript code cannot work yet !