angular repeat problem

HTML

<div ng-app="testApp" ng-controller="sweetCtrl">
    <p>raw list: {{someList}}</p>
    <p>repeat list:</p>
    <test sl="someList"></test>
    <button>
    test
    </button>
</div>

CSS

*{ font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, arial, sans-serif; font-size:1.1em;}

JavaScript

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p ng-repeat="x in sl">{{x.val}}</p>', // It works now
        scope: {
            sl: '=sl'
        }
    };
});

function sweetCtrl($scope){
    $scope.someList = 
    [
        {"val":"a"},
        {"val":"b"},
        {"val":"c"},
        {"val":"d"},
        {"val":"e"},
        {"val":"f"}
    ];
}