Only retrieve plugin content when 'Show Content' is pressed

directives/plugin.html

@@ -1,17 +1,18 @@
-<div ng-show="data.visible">
+<div ng-show="plugin.visible">
   <button class="btn btn-primary btn-sm pull-right"
-          ng-click="data.visible = false">
+          ng-click="hideContent()">
-    Hide {{ data.name }}
+    Hide {{ plugin.name }}
   </button>
-  <div ng-bind-html="data.content"></div>
+
+  <div ng-bind-html="displayedContent"></div>
 </div>
 
-<div ng-hide="data.visible">
+<div ng-hide="plugin.visible">
   <button class="btn btn-sm pull-right"
           bo-class="{
-                    'btn-warning': data.nsfw,
+                    'btn-warning': plugin.nsfw,
-                    'btn-primary': !data.nsfw}"
+                    'btn-primary': !plugin.nsfw}"
-          ng-click="data.visible = true">
+          ng-click="showContent()">
-          Show {{ data.name }}
+          Show {{ plugin.name }}
   </button>
 </div>

js/glowingbear.js

@@ -764,13 +764,38 @@ weechat.config(['$routeProvider',
 
 
 weechat.directive('plugin', function() {
-    
+    /*
+     * Plugin directive
+     * Shows additional plugin content
+     */
     return {
         templateUrl: 'directives/plugin.html',
 
         scope: {
-            data: '=data',
+            plugin: '=data',
         },
+
+        controller: function($scope) {
+
+            $scope.displayedContent = "";
+
+            $scope.hideContent = function() {
+                $scope.plugin.visible = false;
+            }
+
+            $scope.showContent = function() {
+                /*
+                 * Shows the plugin content.
+                 * displayedContent is bound to the DOM.
+                 * Actual plugin content is only fetched when
+                 * content is shown.
+                 */
+                $scope.displayedContent = $scope.plugin.content;
+                $scope.plugin.visible = true;
+            }
+
+        }
+
     }
 
 });