Используя angular и jquery, я реализовал функцию slideToggle. Чтобы применить эту функцию только к одному конкретному элементу HTML, я использую в функции ng-click один параметр, мой код работает нормально, но я хочу знать, существует ли еще один лучший способ реализации директив и функций ng-click в angular:

index.html

    
    


    
        
        
        
        
            <p>This is section #1</p>
        
        
            <p>This is another section #1</p>
        
        
            <p>This is 3 section #1</p>
        
    


    
    
    

styles.css

.div1 {
    background: Brown;
    width: 200px;
    height: 200px;
    text-align: center;
}
.div1 p {
    position: relative;
    top: 50%;
}

directives.js

angular.module("myApp", []) //
    .controller('MainController', function($scope) {
        $scope.toggle = function(section) {
            console.log(' section :' + section);
            $scope.section = section;
            $scope.$broadcast('event:toggle');
        }
    }) //
    .directive('toggle', function() {
        return function(scope, elem, attrs) {
            scope.$on('event:toggle', function() {
                if(attrs.toggle == scope.section){
                    elem.slideToggle('fast');
                }
            });
        };
    });

Одной из моих проблем является способ связи между директивой и областью действия:

        $scope.section = section;

а также

        if(attrs.toggle == scope.section){

Буду признателен за любые советы по улучшению реализации Angular.

Спасибо