Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="myApp">
    <div  ng-controller="myController">
      <ul wrap-modify>
        <li ng-repeat="item in items">{{item}}</li>
      </ul>
    </div>
    
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

angular.module('myApp', []).
controller('myController', function ($scope ) {
  $scope.items = '0123456789'.split('');
}).
directive('wrapModify', function () {
  
  function compile (tElement, tAttrs) {
    return link;
  }
  
  function link (scope, iElement, iAttrs, controller, transcludeFn) {
    transcludeFn( function (clone, scope) {
      iElement.append(clone);
    });
    
    scope.$watch('items', function () {
      alert(iElement.html());
    });
  }
  
  return {
    restrict:   'A',
    transclude: true,
    compile:    compile,
    template:   '<div class="wrap-modify"></div>'
  };
});

/* Styles go here */