angular repeat problem

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div ng-app="App">
<div>
    <input type='button'  value="Add" onclick="addSomething()" />
</div> 

<div id="tabs_1">
</div>  
    
<anpr></anpr>    
    
</div>

JavaScript

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

app.directive('anpr', function(){
    return{
        restrict: 'E',
        template: '<p>Testing Directive</p>'
    }
});

function addSomething(){
    $('#tabs_1').append("<anpr></anpr>");// if you look in the source it adds <anpr></anpr> but it should add <p>Testing Directive</p>
    
}