Having Trouble With Custom Widget... Works as custom page, but cant get to work in custom widget

Q&A
1

I created a custom page that displays an LHC-Lform in a bonita page, but when I try to get the same functionality into a widget it fails.  I am sure it has something to do with the way I set the controller, but I cant determine what I have done wrong.   

I appreciate any help you can provide to make this work.   Thanks!

Link to zip file of Working Page - https://drive.google.com/open?id=10srLQeJRSUZX-PF8iO2GdtZalrH7fgAz

Link to zip file of widget not working - https://drive.google.com/file/d/1y_hugV9oQYNoCsBujK7CpQSJX2tsnzFr/view?usp=sharing

Link about LForms Project - http://lhncbc.github.io/lforms/demos.html

Code From widget not working 

HTML - 

      <span class="glyphicon glyphicon-th"></span>Form Displayed Below
            <div class="panel panel-primary">

 <lforms lf-data="ctrl.myFormDefinition()"></lforms>
</div>
 

Controller - 

function lformsController ($scope) {
    'use strict';
  
    this.myFormDefinition = function() {
        $scope.properties.myformoutput = new LForms.LFormsData($scope.properties.formdatastuff);
    // console.log(JSON.stringify("here is form def   " + this.myFormDefinition))
    // $scope.properties.formdatastuff = $scope.myFormData.getUserData(null, true, true, true)
return  $scope.properties.myformoutput
  }
}