jquery-steps into a angularjs directive

Question

I am working on my first angularjs directive. I was hoping to wrap jquery-steps (https://github.com/rstaib/jquery-steps) into a directive. My issue comes when I try to bind inputs or expression inside the content of the steps to controller models they don't bind. An example code of what I have is below.

angular.module('foobar',[])
.controller 'UserCtrl', ($scope) ->
    $scope.user =
       name:'John Doe'

.directive 'wizardForm', () ->
   return {
      restrict: 'A',
      link: (scope, ele) ->
        ele.steps({})
    }

The html looks as follows

<div ng-controller="UserCtrl">    

  <div class='vertical' wizard-form>
     <h1> Step 1 </h1>
     <div>Name: {{user.name}}</div>

     <h1> Step 2 </h1>
     <div> Advanced Info etc</div>
  </div>
</div>

The output for the content in step 1 is Name: {{user.name}}

I am still a beginner with angular so I cannot seem to understand why there is no scope or model attached to the content area. Any tips or leads to get me on the right track would be very helpful!

EDIT: I added a plnkr to show what I have tried. http://plnkr.co/edit/y60yZI0oBjW99bBgS7Xd

Answer 1

The following resolved this issue in my project:

.directive('uiWizardForm', ['$compile', ($compile) ->
    return {
        link: (scope, ele) ->
            ele.wrapInner('<div class="steps-wrapper">')
            steps = ele.children('.steps-wrapper').steps()
            $compile(steps)(scope)
    }
])