Databinding issues working

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
</head>

<body>
  <div class="widget" ng-controller="MyCtrl as vm">
    <h3>MyCtrl</h3>
    <p>Set the variable of the service through a controller</p>
    <label>isVisible:</label>
    {{ vm.data.isVisible }}
    <br />
    <button ng-click="vm.toggle()">Toggle</button>
  </div>
  <div class="widget">
    <h3>Container directive output</h3>
    <container>
    </container>
  </div>
  <script>
    angular.module('plunker', [])
      .factory('service', function() {
        var service = {
          obj: {
            isVisible: true
          }
        };
        return service;
      })
      .controller('MyCtrl', function(service, $scope) {
        var vm = this;
        vm.data = service.obj;

        vm.toggle = function() {
          service.obj.isVisible = !service.obj.isVisible;
        };
      })
      .directive('container', function() {
        return {
          restrict: 'E',
          template: '<div ng-show="vm.data.isVisible">Hi there!</div>',
          controller: function(service) {
            var vm = this;
            vm.data = service.obj;
          },
          controllerAs: 'vm'
        };
      });
  </script>
</body>

</html>

/* Put your css in here */

.widget {
  border: 1px solid;
  padding: 5px;
}

label {
  font-weight: bold;
}