AngularJS - jQuery slide toggle

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div data-ng-controller="MainController">      
        <input type="button" value="Toggle First" ng-click="box1=!box1" ng-init="box1=true" >
        <input type="button" value="Toggle Second" ng-click="box2=!box2" ng-init="box2=true" >
        <input type="button" value="Toggle third" ng-click="box3=!box3" ng-init="box3=true" >
                
        <div class="div1" data-slide-toggle="box1" data-slide-duration="100" >
            <p>This is section #1</p>
        </div>
        <div class="div1" data-slide-toggle="box2" data-slide-duration="2000">
            <p>This is another section #1</p>
        </div>
        <div class="div1" data-slide-toggle="box3">
            <p>This is 3 section #1</p>
        </div>
    </div>
</body>
</html>

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

var myApp = angular.module("myApp", []);

myApp.controller('MainController', function($scope) { });
    
myApp.directive('slideToggle', function() {  
  return {
    restrict: 'A',      
    scope:{
      isOpen: "=slideToggle",
      slideDuration : "@"
    },
    link: function(scope, element, attr) {
      scope.slideDuration = scope.slideDuration | 200;
      
      scope.$watch('isOpen', function(newVal,oldVal){
        if(newVal){
          element.slideDown(scope.slideDuration);
        } else {
          element.slideUp(scope.slideDuration);
        }
      });
    }
  };  
});