JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.js"></script>
<div ng-app="app">
  <div ng-controller="AppCtrl">
    <div>{{listModel.length}} items in the app controller</div>      
    <div>{{listModel}}</div>
    <a ng-click="increment()">increment</a>
    <br /><br />
    <list-one model='listModel'></list-one>
    <br />
    <list-two model='listModel'></list-two>
  </div>
</div>

JavaScript

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


function AppCtrl($scope) {
  var count = 0;
  $scope.listModel = [];
  $scope.increment = function() {
    $scope.listModel.push('ctrl-item-' + count++);
  }
}


function ListCtrl($scope, $attrs) {
  var count = 0;
  $scope.model = [];
  $scope.$watch($attrs.model, function(newValue) {
    if(newValue) {
      $scope.model = newValue;
    }
  });
  $scope.increment = function(list) {
    $scope.model.push('d-' + list + '-item-' + count++);
  };
}


// directive using controller assignment
app.directive('listOne', function() {
  return {
    restrict: 'E',
    scope: true,
    controller: ListCtrl,
    template: '<div>{{model.length}} items in list one<div><a ng-click="increment(\'one\')">increment</a>'
  };
});


// directive using the linker function
app.directive('listTwo', ['$injector', function($injector) {
  return {
    restrict: 'E',
    scope: true,
    link: function(scope, element, attrs) {
      $injector.instantiate(ListCtrl, {
        $scope: scope, $attrs: attrs
      });
    },
    template: '<div>{{model.length}} items in list two<div><a ng-click="increment(\'two\')">increment</a>'
  };
}]);