diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d7991b9649..69211380c9 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -22,10 +22,10 @@
 <div content="jquery-wrapper" class="abs holder-all browse-mode">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
-        <div class='split-layout vertical contents abs'
-             ng-controller="SplitPaneController as splitter">
-            <div class='split-pane-component treeview pane'
-                 ng-style="{ width: splitter.state() + 'px'}">
+        <mct-split-pane class='split-layout vertical contents abs'
+                        anchor='left'
+                        initial="25%">
+            <div class='split-pane-component treeview pane'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -35,18 +35,14 @@
                     </mct-representation>
                 </div>
             </div>
-            <div class="splitter"
-                 ng-style="{ left: splitter.state() + 'px'}"
-                 mct-drag-down="splitter.startMove()"
-                 mct-drag="splitter.move(delta[0])"></div>
-            <div class='split-pane-component items pane'
-                 ng-style="{ left: (splitter.state()+4) + 'px', right: '0px' }">
+            <mct-splitter></mct-splitter>
+            <div class='split-pane-component items pane'>
                 <div class='holder abs' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
             </div>
-        </div>
+        </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
-</div>
\ No newline at end of file
+</div>
diff --git a/platform/commonUI/general/src/directives/MCTSplitPane.js b/platform/commonUI/general/src/directives/MCTSplitPane.js
index 88d6e7aeda..9e8dd34e58 100644
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@@ -97,11 +97,11 @@ define(
                 bottom: true
             };
 
-            function controller(scope, element, attrs) {
-                var anchorKey = attrs.anchor || DEFAULT_ANCHOR,
+            function controller($scope, $element, $attrs) {
+                var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
                     anchor,
-                    styleValue = attrs.initial,
-                    positionParsed = $parse(attrs.position),
+                    styleValue = $attrs.initial,
+                    positionParsed = $parse($attrs.position),
                     position; // Start undefined, until explicitly set
 
                 // Convert a pixel offset to a calc expression
@@ -119,29 +119,28 @@ define(
                 function updateChildren(children) {
                     // Pick out correct elements to update, flowing from
                     // selected anchor edge.
-                    var first = children.eq(anchor.reversed ? 0 : 2),
+                    var first = children.eq(anchor.reversed ? 2 : 0),
                         splitter = children.eq(1),
-                        last = children.eq(anchor.reversed ? 2 : 0),
+                        last = children.eq(anchor.reversed ? 0 : 2),
                         splitterSize = getSize(splitter[0]),
-                        halfSize = splitterSize / 2;
+                        offsetSize = splitterSize / 2;
 
                     first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, calc(-halfSize));
+                    first.css(anchor.dimension, calc(-offsetSize));
 
-                    splitter.css(anchor.edge, calc(-halfSize));
-                    splitter.css(anchor.dimension, splitterSize + "px");
+                    splitter.css(anchor.edge, styleValue);
 
-                    last.css(anchor.edge, calc(halfSize));
+                    last.css(anchor.edge, calc(offsetSize));
                     last.css(anchor.opposite, "0px");
                 }
 
                 // Update positioning of contained elements
                 function updateElementPositions() {
-                    var children = element.children();
+                    var children = $element.children();
 
                     // Check to make sure contents are well-formed
                     if (children.length !== 3 ||
-                            children[1].nodeName !== 'mct-splitter') {
+                            children[1].nodeName.toLowerCase() !== 'mct-splitter') {
                         $log.warn(CHILDREN_WARNING_MESSAGE);
                         return;
                     }
@@ -156,7 +155,7 @@ define(
                         position = value;
                         // Pass change up so this state can be shared
                         if (positionParsed.assign) {
-                            positionParsed.assign(scope, value);
+                            positionParsed.assign($scope, value);
                         }
                         styleValue = position + 'px';
                         updateElementPositions();
@@ -171,7 +170,7 @@ define(
                 }
                 anchor = ANCHORS[anchorKey];
 
-                scope.$watch(attrs.position, getSetPosition);
+                $scope.$watch($attrs.position, getSetPosition);
 
                 // Initialize positions
                 updateElementPositions();
@@ -187,7 +186,7 @@ define(
 
             return {
                 // Restrict to attributes
-                restrict: "A",
+                restrict: "E",
                 // Expose its controller
                 controller: controller
             };
diff --git a/platform/commonUI/general/src/directives/MCTSplitter.js b/platform/commonUI/general/src/directives/MCTSplitter.js
index 6f87bd8a28..fa14e6af6f 100644
--- a/platform/commonUI/general/src/directives/MCTSplitter.js
+++ b/platform/commonUI/general/src/directives/MCTSplitter.js
@@ -27,7 +27,7 @@ define(
         'use strict';
 
         // Pixel width to allocate for the splitter itself
-        var SPLITTER_TEMPLATE = "<div class=\"splitter\" " +
+        var SPLITTER_TEMPLATE = "<div class='abs'" +
                 "mct-drag-down=\"splitter.startMove()\" " +
                 "mct-drag=\"splitter.move(delta)\"></div>",
             OFFSETS_BY_EDGE = {
@@ -45,6 +45,8 @@ define(
             function link(scope, element, attrs, mctSplitPane) {
                 var initialPosition;
 
+                element.addClass("splitter");
+
                 scope.splitter = {
                     // Begin moving this splitter
                     startMove: function () {