angular repeat problem

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div ng-app="App">

    <input addtab type="button" value="Add"/>
    
    <div id="tabs_1">
    </div>  
    
    <br/><br/>
    <anpr></anpr>    
    
</div>

JavaScript

var app = angular.module('App', []);

app.directive("addtab", function($compile){
    return function(scope, element){
        element.bind("click",function(){
             var el = $compile('<anpr/>')(scope);
            $('#tabs_1').append(el);
        })
    }
})

app.directive('anpr', function(){
    return{
        restrict: 'E',
//        templateUrl: 'app/partials/SETUP/anprTab.html' - it won`t load the content 
        template: '<div>anpr tab</div>'
    }
});