Angular 1.4: Empty Fiddle

http://angularjs.org/ Ready to start playing with angular in your browser

by heriberto perez

HTML

<div ng-controller="MyCtrl">
  <textarea id='text-area' ng-model="html"></textarea>
  <div dynamic="html"></div>
  <img ng-src="{{user.avatar_url}}"
                   class="clickable-element"
                   interact-with-image-modal-preview="{{user.avatar_url}}"
                   alt="User image"/>
  <button ng-click="updateImage()">Update image</button>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-animate.js"></script>
<style>

JavaScript

var app = angular.module('App',[])

app.controller('MyCtrl', [
    '$scope',
    function (
      $scope
    ) {
       $scope.html = '<h1>Testing</h1>';
       $scope.updateImage = function() {
         $scope.user.avatar_url = "https://invesmarkstaging.s3.amazonaws.com/survey_uploads%2Fb2671e8d-5494-4d48-8139-94ecfbd2f0cc%2FScreen+Shot+2017-11-23+at+2.28.48+PM.png"
       }
       $scope.user = {};
    }
  ])

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});