How do I make my cards moveable when toggled?

When I toggle the cards in my ionic side menu to hide and show on the main page... they are not longer moveable (draggable). I know if I coded them to show... they are moveable but as soon as I hide them and reshow them... they are no longer moveable.

Here is the CodePen example I used to create mine: http://codepen.io/ionic/pen/tfAzj

It is set so that when 'checked: true'... it show's on the page. And when 'checked: false'... the card is hidden on the main page.

Here is my code for the toggle menu:

<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
  <h1 class="title">Projects</h1>
</header>
<ion-content class="has-header">

<ion-toggle ng-repeat="card in cards"
ng-model="card.checked" 
ng-checked="card.checked">
{{ card.title }}
</ion-toggle>


</label>

</div>
</ion-content>
</ion-side-menu>

Here is my draggable code:

<script src="js/app.js"></script>
  <script>
  $(function () {
   $(".card1").draggable({
   });
   $(".theLabel").draggable({
   });
 });

  </script>

Here is the Javascript:

  $scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };

  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';


});