Blade variable in Javascript

I have a controller which will save a widget(html elements and contents).My problem now is I cant use the variable from the controller as a value in Javascript variable

in view

updateLayout = function(){
  var html={!! $widgets !!};
    $('#sortable_portlets').html(html);  
}

which then show the error in console

Uncaught SyntaxError: Unexpected token <

the line that error

 updateLayout = function(){
  var html=
<div class="col-md-4 column sortable">//show red x

My controller

$widgets = Widgets::all()->last();
    $dd=$widgets->html;
    return view('tvproject.partA', array(
        'widgets' => $dd
    ));

Passing directly to the blade template

Result

 -icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div> <div class="portlet portlet-sortable light bordered ui-widget-content ui-resizable" style="display: block;"><div class="portlet-title ui-sortable-handle"><div class="caption font-green-sharp"><i class="icon-speech font-green-sharp"></i><span class="caption-subject bold uppercase"> FEEDBACK</span></div><div class="actions"><a href="javascript:;" class="btn btn-circle btn-default btn-sm remove"><i class="fa fa-times"></i> Remove </a><a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;"></a></div></div><div class="portlet-body"><div>FEEDBACK CONTENT</div></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div></div> <div class="col-md-4 column sortable">

refactor to

var html =  

does not resolve the problem

via Chebli Mohamed