Convert Jquery plugin to angularjs Directive

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.7.0" data-semver="1.7.0" src="https://code.angularjs.org/1.7.0/angular.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="myapp">
    <div ng-controller="myController">
      <div my-slider model="sliderValue"></div>
      <p>
        Slider's value is:

        <input ng-model="sliderValue" />
      </p>
    </div>
  </div>
</body>

</html>

// Code goes here

var app = angular.module('myapp', []);
app.controller('myController', ['$scope', function($scope) {
  $scope.sliderValue = 30;
}]);
app.directive('mySlider', function() {
  return {
    restrict: 'A',
    scope: {
      'model': '='
    },
    link: function(scope, elem, attrs) {
      $(elem).slider({
        value: +scope.model,
        slide: function(event, ui) {
          scope.$apply(function() {
            scope.model = ui.value;
          });

        }
      });
    }
  };
});

/* Styles go here */