diff --git a/dist/readmore.js b/dist/readmore.js
index 01a54ea..67ca12e 100644
--- a/dist/readmore.js
+++ b/dist/readmore.js
@@ -2,160 +2,175 @@
 
 readMore.$inject = ["$templateCache"];
 angular
-	.module('hm.readmore', ['ngAnimate', 'ngSanitize'])
-	.directive('hmReadMore', readMore)
+    .module('hm.readmore', ['ngAnimate', 'ngSanitize'])
+    .directive('hmReadMore', readMore)
 	.config(["$logProvider", function ($logProvider) {
-		$logProvider.debugEnabled(false);
+        $logProvider.debugEnabled(false);
 	}]);
 
 /** @ngInject */
 function readMore($templateCache) {
-	hmReadMoreController.$inject = ["$filter", "$scope", "$log"];
-	var directive = {
-		restrict: 'AE',
-		scope: {
-			hmText: '@',
-			hmLimit: '@',
-			hmMoreText: '@',
-			hmLessText: '@',
-			hmDotsClass: '@',
-			hmLinkClass: '@'
-		},
-		template: $templateCache.get('readmore.template.html'),
-		controller: hmReadMoreController,
-		controllerAs: 'vm',
-		bindToController: true
-	};
-
-	return directive;
-
-	/** @ngInject */
-	// "bindToController: true" binds scope variables to Controller
-	function hmReadMoreController($filter, $scope, $log) {
-		var vm = this;
-		vm.toggle = {
-			dots: '...',
-			dotsClass: vm.hmDotsClass,
-			linkClass: vm.hmLinkClass
-		}
-
-		vm.$onInit = function(){
-			$log.debug('initialize');
-			setToggleMoreText();
-			setToggleLessText();
-			validateLimit();
-			setLessAndMoreText();
-			setShowToggle();
-			setCurrentToggleText();
-			setLinkClass();
-			setDotsClass();
-		}
-
-		// Toggle functions
-		function setToggleMoreText() {
-			$log.debug('setToggleMoreText');
-			vm.toggle.moreText = vm.hmMoreText || 'Read more';
-		}
-
-		function setToggleLessText() {
-			$log.debug('setToggleLessText');
-			vm.toggle.lessText = vm.hmLessText || 'Read less';
-		}
-
-		function setCurrentToggleText() {
-			$log.debug('setCurrentToggleText');
-			vm.toggle.text = vm.toggle.state ? vm.toggle.lessText : vm.toggle.moreText;
-		}
-
-		function setShowToggle() {
-			$log.debug('setShowToggle');
-			vm.toggle.show = vm.moreText && vm.moreText.length > 0;
-		}
-
-		function setLinkClass(){
-			$log.debug('setLinkClass');
-			vm.toggle.linkClass = vm.hmLinkClass;
-		}
-
-		function setDotsClass(){
-			$log.debug('setDotsClass');
-			vm.toggle.dotsClass = vm.hmDotsClass;
-		}
-
-		vm.doToggle = function () {
-			$log.debug('doToggle');
-			vm.toggle.state = !vm.toggle.state;
-			vm.showMoreText = !vm.showMoreText;
-			setCurrentToggleText();
-		}
-
-		$scope.$watch('vm.hmMoreText', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmMoreText changed');
-				setToggleMoreText();
-				setCurrentToggleText();
-			}
-		});
-
-		$scope.$watch('vm.hmLessText', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmLessText changed');
-				setToggleLessText();
-				setCurrentToggleText();
-			}
-		});
-
-		$scope.$watch('vm.hmDotsClass', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmDotsClass changed');
-				setDotsClass();
-			}
-		});
-
-		$scope.$watch('vm.hmLinkClass', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmLinkClass changed');
-				setLinkClass();
-			}
-		});
-
-		// ----------
-
-		// If negative number, set to undefined
-		function validateLimit() {
-			$log.debug('validateLimit');
-			vm.hmLimit = (vm.hmLimit && vm.hmLimit <= 0) ? undefined : vm.hmLimit;
-		}
-
-		function getMoreTextLimit() {
-			$log.debug('getMoreTextLimit');
-			return vm.hmLimit && vm.hmLimit < vm.hmText.length ? vm.hmLimit - vm.hmText.length : 0;
-		}
-
-		function setLessAndMoreText() {
-			$log.debug('setLessAndMoreText');
-			vm.lessText = $filter('limitTo')(vm.hmText, vm.hmLimit);
-			vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());
-		}
-
-		$scope.$watch('vm.hmText', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmText changed');
-				validateLimit();
-				setLessAndMoreText();
-				setShowToggle();
-			}
-		});
-
-		$scope.$watch('vm.hmLimit', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmLimit changed');
-				validateLimit();
-				setLessAndMoreText();
-				setShowToggle();
-			}
-		});
-	}
+    hmReadMoreController.$inject = ["$filter", "$scope", "$log"];
+    var directive = {
+        restrict: 'AE',
+        scope: {
+            hmText: '@',
+            hmTextClass: '@',
+            hmLimit: '@',
+            hmMoreText: '@',
+            hmLessText: '@',
+            hmDotsClass: '@',
+            hmLinkClass: '@'
+        },
+        template: $templateCache.get('readmore.template.html'),
+        controller: hmReadMoreController,
+        controllerAs: 'vm',
+        bindToController: true
+    };
+
+    return directive;
+
+    /** @ngInject */
+    // "bindToController: true" binds scope variables to Controller
+    function hmReadMoreController($filter, $scope, $log) {
+        var vm = this;
+        vm.toggle = {
+            dots: ' ...',
+            dotsClass: vm.hmDotsClass,
+            linkClass: vm.hmLinkClass
+        }
+
+        vm.$onInit = function(){
+            $log.debug('initialize');
+            setToggleMoreText();
+            setToggleLessText();
+            validateLimit();
+            setLessAndMoreText();
+            setShowToggle();
+            setCurrentToggleText();
+            setLinkClass();
+            setDotsClass();
+        }
+
+        // Toggle functions
+        function setToggleMoreText() {
+            $log.debug('setToggleMoreText');
+            vm.toggle.moreText = vm.hmMoreText || 'Read more';
+        }
+
+        function setToggleLessText() {
+            $log.debug('setToggleLessText');
+            vm.toggle.lessText = vm.hmLessText || 'Read less';
+        }
+
+        function setCurrentToggleText() {
+            $log.debug('setCurrentToggleText');
+            vm.toggle.text = vm.toggle.state ? vm.toggle.lessText : vm.toggle.moreText;
+        }
+
+        function setShowToggle() {
+            $log.debug('setShowToggle');
+            vm.toggle.show = vm.moreText && vm.moreText.length > 0;
+        }
+
+        function setLinkClass(){
+            $log.debug('setLinkClass');
+            vm.toggle.linkClass = vm.hmLinkClass;
+        }
+
+        function setDotsClass(){
+            $log.debug('setDotsClass');
+            vm.toggle.dotsClass = vm.hmDotsClass;
+        }
+
+        vm.doToggle = function (event) {
+            // prevent the click event from propagate
+            if (event) {
+                event.preventDefault()
+                event.stopPropagation()
+            }
+
+            $log.debug('doToggle');
+            vm.toggle.state = !vm.toggle.state;
+            vm.showMoreText = !vm.showMoreText;
+
+            if (vm.showMoreText) {
+                //replace the entire text
+                vm.lessText = ''
+                vm.moreText = vm.hmText
+            } else {
+                vm.lessText = $filter('limitTo')(vm.hmText, vm.hmLimit)
+                vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());
+            }
+            setCurrentToggleText();
+        }
+
+        $scope.$watch('vm.hmMoreText', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmMoreText changed');
+                setToggleMoreText();
+                setCurrentToggleText();
+            }
+        });
+
+        $scope.$watch('vm.hmLessText', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmLessText changed');
+                setToggleLessText();
+                setCurrentToggleText();
+            }
+        });
+
+        $scope.$watch('vm.hmDotsClass', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmDotsClass changed');
+                setDotsClass();
+            }
+        });
+
+        $scope.$watch('vm.hmLinkClass', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmLinkClass changed');
+                setLinkClass();
+            }
+        });
+
+        // ----------
+
+        // If negative number, set to undefined
+        function validateLimit() {
+            $log.debug('validateLimit');
+            vm.hmLimit = (vm.hmLimit && vm.hmLimit <= 0) ? undefined : vm.hmLimit;
+        }
+
+        function getMoreTextLimit() {
+            $log.debug('getMoreTextLimit');
+            return vm.hmLimit && vm.hmLimit < vm.hmText.length ? vm.hmLimit - vm.hmText.length : 0;
+        }
+
+        function setLessAndMoreText() {
+            $log.debug('setLessAndMoreText');
+            vm.lessText = $filter('limitTo')(vm.hmText, vm.hmLimit);
+            vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());
+        }
+
+        $scope.$watch('vm.hmText', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmText changed');
+                validateLimit();
+                setLessAndMoreText();
+                setShowToggle();
+            }
+        });
+
+        $scope.$watch('vm.hmLimit', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmLimit changed');
+                validateLimit();
+                setLessAndMoreText();
+                setShowToggle();
+            }
+        });
+    }
 };
-
-angular.module('hm.readmore').run(['$templateCache', function($templateCache) {$templateCache.put('readmore.template.html','<span name="text"><span ng-bind-html="vm.lessText" style="white-space:pre-wrap;"></span><span ng-show="vm.showMoreText" class="more-show-hide" ng-bind-html="vm.moreText" style="white-space:pre-wrap;"></span></span><span name="toggle" ng-show="vm.toggle.show"><span ng-class="vm.toggle.dotsClass" ng-show="!vm.toggle.state">{{ vm.toggle.dots }}</span><a ng-class="vm.toggle.linkClass" ng-click="vm.doToggle()">{{ vm.toggle.text }}</a></span>');}]);
\ No newline at end of file
+angular.module('hm.readmore').run(['$templateCache', function($templateCache) {$templateCache.put('readmore.template.html','<span name="text"><span ng-show="vm.hmTextClass === \'\'" ng-bind-html="vm.showMoreText ? vm.moreText:vm.lessText" style="white-space:pre-wrap; "></span><span ng-show="vm.hmTextClass !== \'\'" ng-bind-html="vm.showMoreText ? vm.moreText:vm.lessText" style="white-space:pre-wrap; font-family: monospace;"></span></span><span name="toggle" ng-show="vm.toggle.show" style="padding-left: 1em;"><!--<span ng-class="vm.toggle.dotsClass" ng-show="!vm.toggle.state">{{ vm.toggle.dots }}</span>--><a ng-class="vm.toggle.linkClass" ng-click="vm.doToggle($event)">{{ vm.toggle.text }}</a></span>');}]);
\ No newline at end of file
diff --git a/dist/readmore.min.js b/dist/readmore.min.js
index 7bfff92..59c0638 100644
--- a/dist/readmore.min.js
+++ b/dist/readmore.min.js
@@ -1 +1 @@
-"use strict";function readMore(e){function t(e,t,o){function s(){o.debug("setToggleMoreText"),d.toggle.moreText=d.hmMoreText||"Read more"}function n(){o.debug("setToggleLessText"),d.toggle.lessText=d.hmLessText||"Read less"}function m(){o.debug("setCurrentToggleText"),d.toggle.text=d.toggle.state?d.toggle.lessText:d.toggle.moreText}function g(){o.debug("setShowToggle"),d.toggle.show=d.moreText&&d.moreText.length>0}function l(){o.debug("setLinkClass"),d.toggle.linkClass=d.hmLinkClass}function i(){o.debug("setDotsClass"),d.toggle.dotsClass=d.hmDotsClass}function a(){o.debug("validateLimit"),d.hmLimit=d.hmLimit&&d.hmLimit<=0?void 0:d.hmLimit}function h(){return o.debug("getMoreTextLimit"),d.hmLimit&&d.hmLimit<d.hmText.length?d.hmLimit-d.hmText.length:0}function r(){o.debug("setLessAndMoreText"),d.lessText=e("limitTo")(d.hmText,d.hmLimit),d.moreText=e("limitTo")(d.hmText,h())}var d=this;d.toggle={dots:"...",dotsClass:d.hmDotsClass,linkClass:d.hmLinkClass},d.$onInit=function(){o.debug("initialize"),s(),n(),a(),r(),g(),m(),l(),i()},d.doToggle=function(){o.debug("doToggle"),d.toggle.state=!d.toggle.state,d.showMoreText=!d.showMoreText,m()},t.$watch("vm.hmMoreText",function(e,t){e!=t&&(o.debug("hmMoreText changed"),s(),m())}),t.$watch("vm.hmLessText",function(e,t){e!=t&&(o.debug("hmLessText changed"),n(),m())}),t.$watch("vm.hmDotsClass",function(e,t){e!=t&&(o.debug("hmDotsClass changed"),i())}),t.$watch("vm.hmLinkClass",function(e,t){e!=t&&(o.debug("hmLinkClass changed"),l())}),t.$watch("vm.hmText",function(e,t){e!=t&&(o.debug("hmText changed"),a(),r(),g())}),t.$watch("vm.hmLimit",function(e,t){e!=t&&(o.debug("hmLimit changed"),a(),r(),g())})}return t.$inject=["$filter","$scope","$log"],{restrict:"AE",scope:{hmText:"@",hmLimit:"@",hmMoreText:"@",hmLessText:"@",hmDotsClass:"@",hmLinkClass:"@"},template:e.get("readmore.template.html"),controller:t,controllerAs:"vm",bindToController:!0}}readMore.$inject=["$templateCache"],angular.module("hm.readmore",["ngAnimate","ngSanitize"]).directive("hmReadMore",readMore).config(["$logProvider",function(e){e.debugEnabled(!1)}]),angular.module("hm.readmore").run(["$templateCache",function(e){e.put("readmore.template.html",'<span name="text"><span ng-bind-html="vm.lessText" style="white-space:pre-wrap;"></span><span ng-show="vm.showMoreText" class="more-show-hide" ng-bind-html="vm.moreText" style="white-space:pre-wrap;"></span></span><span name="toggle" ng-show="vm.toggle.show"><span ng-class="vm.toggle.dotsClass" ng-show="!vm.toggle.state">{{ vm.toggle.dots }}</span><a ng-class="vm.toggle.linkClass" ng-click="vm.doToggle()">{{ vm.toggle.text }}</a></span>')}]);
\ No newline at end of file
+"use strict";function readMore(e){function t(e,t,s){function o(){s.debug("setToggleMoreText"),T.toggle.moreText=T.hmMoreText||"Read more"}function m(){s.debug("setToggleLessText"),T.toggle.lessText=T.hmLessText||"Read less"}function n(){s.debug("setCurrentToggleText"),T.toggle.text=T.toggle.state?T.toggle.lessText:T.toggle.moreText}function g(){s.debug("setShowToggle"),T.toggle.show=T.moreText&&T.moreText.length>0}function l(){s.debug("setLinkClass"),T.toggle.linkClass=T.hmLinkClass}function i(){s.debug("setDotsClass"),T.toggle.dotsClass=T.hmDotsClass}function a(){s.debug("validateLimit"),T.hmLimit=T.hmLimit&&T.hmLimit<=0?void 0:T.hmLimit}function h(){return s.debug("getMoreTextLimit"),T.hmLimit&&T.hmLimit<T.hmText.length?T.hmLimit-T.hmText.length:0}function r(){s.debug("setLessAndMoreText"),T.lessText=e("limitTo")(T.hmText,T.hmLimit),T.moreText=e("limitTo")(T.hmText,h())}var T=this;T.toggle={dots:" ...",dotsClass:T.hmDotsClass,linkClass:T.hmLinkClass},T.$onInit=function(){s.debug("initialize"),o(),m(),a(),r(),g(),n(),l(),i()},T.doToggle=function(t){t&&(t.preventDefault(),t.stopPropagation()),s.debug("doToggle"),T.toggle.state=!T.toggle.state,T.showMoreText=!T.showMoreText,T.showMoreText?(T.lessText="",T.moreText=T.hmText):(T.lessText=e("limitTo")(T.hmText,T.hmLimit),T.moreText=e("limitTo")(T.hmText,h())),n()},t.$watch("vm.hmMoreText",function(e,t){e!=t&&(s.debug("hmMoreText changed"),o(),n())}),t.$watch("vm.hmLessText",function(e,t){e!=t&&(s.debug("hmLessText changed"),m(),n())}),t.$watch("vm.hmDotsClass",function(e,t){e!=t&&(s.debug("hmDotsClass changed"),i())}),t.$watch("vm.hmLinkClass",function(e,t){e!=t&&(s.debug("hmLinkClass changed"),l())}),t.$watch("vm.hmText",function(e,t){e!=t&&(s.debug("hmText changed"),a(),r(),g())}),t.$watch("vm.hmLimit",function(e,t){e!=t&&(s.debug("hmLimit changed"),a(),r(),g())})}return t.$inject=["$filter","$scope","$log"],{restrict:"AE",scope:{hmText:"@",hmTextClass:"@",hmLimit:"@",hmMoreText:"@",hmLessText:"@",hmDotsClass:"@",hmLinkClass:"@"},template:e.get("readmore.template.html"),controller:t,controllerAs:"vm",bindToController:!0}}readMore.$inject=["$templateCache"],angular.module("hm.readmore",["ngAnimate","ngSanitize"]).directive("hmReadMore",readMore).config(["$logProvider",function(e){e.debugEnabled(!1)}]),angular.module("hm.readmore").run(["$templateCache",function(e){e.put("readmore.template.html",'<span name="text"><span ng-show="vm.hmTextClass === \'\'" ng-bind-html="vm.showMoreText ? vm.moreText:vm.lessText" style="white-space:pre-wrap; "></span><span ng-show="vm.hmTextClass !== \'\'" ng-bind-html="vm.showMoreText ? vm.moreText:vm.lessText" style="white-space:pre-wrap; font-family: monospace;"></span></span><span name="toggle" ng-show="vm.toggle.show" style="padding-left: 1em;">\x3c!--<span ng-class="vm.toggle.dotsClass" ng-show="!vm.toggle.state">{{ vm.toggle.dots }}</span>--\x3e<a ng-class="vm.toggle.linkClass" ng-click="vm.doToggle($event)">{{ vm.toggle.text }}</a></span>')}]);
\ No newline at end of file
diff --git a/src/readmore.js b/src/readmore.js
index 4263b2f..f3b8736 100644
--- a/src/readmore.js
+++ b/src/readmore.js
@@ -1,157 +1,173 @@
 'use strict';
 
 angular
-	.module('hm.readmore', ['ngAnimate', 'ngSanitize'])
-	.directive('hmReadMore', readMore)
+    .module('hm.readmore', ['ngAnimate', 'ngSanitize'])
+    .directive('hmReadMore', readMore)
 	.config(function ($logProvider) {
-		$logProvider.debugEnabled(false);
+        $logProvider.debugEnabled(false);
 	});
 
 /** @ngInject */
 function readMore($templateCache) {
-	var directive = {
-		restrict: 'AE',
-		scope: {
-			hmText: '@',
-			hmLimit: '@',
-			hmMoreText: '@',
-			hmLessText: '@',
-			hmDotsClass: '@',
-			hmLinkClass: '@'
-		},
-		template: $templateCache.get('readmore.template.html'),
-		controller: hmReadMoreController,
-		controllerAs: 'vm',
-		bindToController: true
-	};
-
-	return directive;
-
-	/** @ngInject */
-	// "bindToController: true" binds scope variables to Controller
-	function hmReadMoreController($filter, $scope, $log) {
-		var vm = this;
-		vm.toggle = {
-			dots: '...',
-			dotsClass: vm.hmDotsClass,
-			linkClass: vm.hmLinkClass
-		}
-
-		vm.$onInit = function(){
-			$log.debug('initialize');
-			setToggleMoreText();
-			setToggleLessText();
-			validateLimit();
-			setLessAndMoreText();
-			setShowToggle();
-			setCurrentToggleText();
-			setLinkClass();
-			setDotsClass();
-		}
-
-		// Toggle functions
-		function setToggleMoreText() {
-			$log.debug('setToggleMoreText');
-			vm.toggle.moreText = vm.hmMoreText || 'Read more';
-		}
-
-		function setToggleLessText() {
-			$log.debug('setToggleLessText');
-			vm.toggle.lessText = vm.hmLessText || 'Read less';
-		}
-
-		function setCurrentToggleText() {
-			$log.debug('setCurrentToggleText');
-			vm.toggle.text = vm.toggle.state ? vm.toggle.lessText : vm.toggle.moreText;
-		}
-
-		function setShowToggle() {
-			$log.debug('setShowToggle');
-			vm.toggle.show = vm.moreText && vm.moreText.length > 0;
-		}
-
-		function setLinkClass(){
-			$log.debug('setLinkClass');
-			vm.toggle.linkClass = vm.hmLinkClass;
-		}
-
-		function setDotsClass(){
-			$log.debug('setDotsClass');
-			vm.toggle.dotsClass = vm.hmDotsClass;
-		}
-
-		vm.doToggle = function () {
-			$log.debug('doToggle');
-			vm.toggle.state = !vm.toggle.state;
-			vm.showMoreText = !vm.showMoreText;
-			setCurrentToggleText();
-		}
-
-		$scope.$watch('vm.hmMoreText', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmMoreText changed');
-				setToggleMoreText();
-				setCurrentToggleText();
-			}
-		});
-
-		$scope.$watch('vm.hmLessText', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmLessText changed');
-				setToggleLessText();
-				setCurrentToggleText();
-			}
-		});
-
-		$scope.$watch('vm.hmDotsClass', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmDotsClass changed');
-				setDotsClass();
-			}
-		});
-
-		$scope.$watch('vm.hmLinkClass', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmLinkClass changed');
-				setLinkClass();
-			}
-		});
-
-		// ----------
-
-		// If negative number, set to undefined
-		function validateLimit() {
-			$log.debug('validateLimit');
-			vm.hmLimit = (vm.hmLimit && vm.hmLimit <= 0) ? undefined : vm.hmLimit;
-		}
-
-		function getMoreTextLimit() {
-			$log.debug('getMoreTextLimit');
-			return vm.hmLimit && vm.hmLimit < vm.hmText.length ? vm.hmLimit - vm.hmText.length : 0;
-		}
-
-		function setLessAndMoreText() {
-			$log.debug('setLessAndMoreText');
-			vm.lessText = $filter('limitTo')(vm.hmText, vm.hmLimit);
-			vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());
-		}
-
-		$scope.$watch('vm.hmText', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmText changed');
-				validateLimit();
-				setLessAndMoreText();
-				setShowToggle();
-			}
-		});
-
-		$scope.$watch('vm.hmLimit', function (newValue, oldValue) {
-			if (newValue != oldValue) {
-				$log.debug('hmLimit changed');
-				validateLimit();
-				setLessAndMoreText();
-				setShowToggle();
-			}
-		});
-	}
-};
+    var directive = {
+        restrict: 'AE',
+        scope: {
+            hmText: '@',
+            hmTextClass: '@',
+            hmLimit: '@',
+            hmMoreText: '@',
+            hmLessText: '@',
+            hmDotsClass: '@',
+            hmLinkClass: '@'
+        },
+        template: $templateCache.get('readmore.template.html'),
+        controller: hmReadMoreController,
+        controllerAs: 'vm',
+        bindToController: true
+    };
+
+    return directive;
+
+    /** @ngInject */
+    // "bindToController: true" binds scope variables to Controller
+    function hmReadMoreController($filter, $scope, $log) {
+        var vm = this;
+        vm.toggle = {
+            dots: ' ...',
+            dotsClass: vm.hmDotsClass,
+            linkClass: vm.hmLinkClass
+        }
+
+        vm.$onInit = function(){
+            $log.debug('initialize');
+            setToggleMoreText();
+            setToggleLessText();
+            validateLimit();
+            setLessAndMoreText();
+            setShowToggle();
+            setCurrentToggleText();
+            setLinkClass();
+            setDotsClass();
+        }
+
+        // Toggle functions
+        function setToggleMoreText() {
+            $log.debug('setToggleMoreText');
+            vm.toggle.moreText = vm.hmMoreText || 'Read more';
+        }
+
+        function setToggleLessText() {
+            $log.debug('setToggleLessText');
+            vm.toggle.lessText = vm.hmLessText || 'Read less';
+        }
+
+        function setCurrentToggleText() {
+            $log.debug('setCurrentToggleText');
+            vm.toggle.text = vm.toggle.state ? vm.toggle.lessText : vm.toggle.moreText;
+        }
+
+        function setShowToggle() {
+            $log.debug('setShowToggle');
+            vm.toggle.show = vm.moreText && vm.moreText.length > 0;
+        }
+
+        function setLinkClass(){
+            $log.debug('setLinkClass');
+            vm.toggle.linkClass = vm.hmLinkClass;
+        }
+
+        function setDotsClass(){
+            $log.debug('setDotsClass');
+            vm.toggle.dotsClass = vm.hmDotsClass;
+        }
+
+        vm.doToggle = function (event) {
+            // prevent the click event from propagate
+            if (event) {
+                event.preventDefault()
+                event.stopPropagation()
+            }
+
+            $log.debug('doToggle');
+            vm.toggle.state = !vm.toggle.state;
+            vm.showMoreText = !vm.showMoreText;
+
+            if (vm.showMoreText) {
+                //replace the entire text
+                vm.lessText = ''
+                vm.moreText = vm.hmText
+            } else {
+                vm.lessText = $filter('limitTo')(vm.hmText, vm.hmLimit)
+                vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());
+            }
+            setCurrentToggleText();
+        }
+
+        $scope.$watch('vm.hmMoreText', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmMoreText changed');
+                setToggleMoreText();
+                setCurrentToggleText();
+            }
+        });
+
+        $scope.$watch('vm.hmLessText', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmLessText changed');
+                setToggleLessText();
+                setCurrentToggleText();
+            }
+        });
+
+        $scope.$watch('vm.hmDotsClass', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmDotsClass changed');
+                setDotsClass();
+            }
+        });
+
+        $scope.$watch('vm.hmLinkClass', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmLinkClass changed');
+                setLinkClass();
+            }
+        });
+
+        // ----------
+
+        // If negative number, set to undefined
+        function validateLimit() {
+            $log.debug('validateLimit');
+            vm.hmLimit = (vm.hmLimit && vm.hmLimit <= 0) ? undefined : vm.hmLimit;
+        }
+
+        function getMoreTextLimit() {
+            $log.debug('getMoreTextLimit');
+            return vm.hmLimit && vm.hmLimit < vm.hmText.length ? vm.hmLimit - vm.hmText.length : 0;
+        }
+
+        function setLessAndMoreText() {
+            $log.debug('setLessAndMoreText');
+            vm.lessText = $filter('limitTo')(vm.hmText, vm.hmLimit);
+            vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());
+        }
+
+        $scope.$watch('vm.hmText', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmText changed');
+                validateLimit();
+                setLessAndMoreText();
+                setShowToggle();
+            }
+        });
+
+        $scope.$watch('vm.hmLimit', function (newValue, oldValue) {
+            if (newValue != oldValue) {
+                $log.debug('hmLimit changed');
+                validateLimit();
+                setLessAndMoreText();
+                setShowToggle();
+            }
+        });
+    }
+};
\ No newline at end of file
diff --git a/src/readmore.spec.js b/src/readmore.spec.js
index 6fff489..25abba6 100644
--- a/src/readmore.spec.js
+++ b/src/readmore.spec.js
@@ -213,8 +213,8 @@ describe('hmReadMoreController', function () {
 
 		controller.doToggle();
 
-		expect(controller.lessText).toEqual(text50);
-		expect(controller.moreText).toEqual('dreams, he found himself transformed in his bed in');
+		expect(controller.lessText).toEqual('');
+        expect(controller.moreText).toEqual(text100)
 		expect(controller.toggle.state).toBeTruthy();
 		expect(controller.showMoreText).toBeTruthy();
 		expect(controller.toggle.text).toEqual('Read less');
@@ -225,10 +225,11 @@ describe('hmReadMoreController', function () {
 		element = compile('<hm-read-more hm-text="' + text100 + '" hm-limit="50" hm-less-text="Read less" hm-more-text="Read more"></hm-read-more>')(scope);
 		scope.$digest();
 		controller = element.controller('hmReadMore');
+
 		controller.doToggle();
 
-		expect(controller.lessText).toEqual(text50);
-		expect(controller.moreText).toEqual('dreams, he found himself transformed in his bed in');
+		expect(controller.lessText).toEqual('');
+        expect(controller.moreText).toEqual(text100)
 		expect(controller.toggle.state).toBeTruthy();
 		expect(controller.showMoreText).toBeTruthy();
 		expect(controller.toggle.text).toEqual('Read less');
diff --git a/src/readmore.template.html b/src/readmore.template.html
index 91ebd52..9a1cf8d 100644
--- a/src/readmore.template.html
+++ b/src/readmore.template.html
@@ -1,9 +1,9 @@
 <span name="text">
-	<span ng-bind-html="vm.lessText" style="white-space:pre-wrap;"></span>
-	<span ng-show="vm.showMoreText" class="more-show-hide" ng-bind-html="vm.moreText" style="white-space:pre-wrap;"></span>
+	<span ng-show="vm.hmTextClass === ''" ng-bind-html="vm.showMoreText ? vm.moreText:vm.lessText" style="white-space:pre-wrap; "></span>
+	<span ng-show="vm.hmTextClass !== ''" ng-bind-html="vm.showMoreText ? vm.moreText:vm.lessText" style="white-space:pre-wrap; font-family: monospace;"></span>
 </span>
 
-<span name="toggle" ng-show="vm.toggle.show">
-	<span ng-class="vm.toggle.dotsClass" ng-show="!vm.toggle.state">{{ vm.toggle.dots }}</span>
-	<a ng-class="vm.toggle.linkClass" ng-click="vm.doToggle()">{{ vm.toggle.text }}</a>
-</span>
+<span name="toggle" ng-show="vm.toggle.show" style="padding-left: 1em;">
+	<!--<span ng-class="vm.toggle.dotsClass" ng-show="!vm.toggle.state">{{ vm.toggle.dots }}</span>-->
+	<a ng-class="vm.toggle.linkClass" ng-click="vm.doToggle($event)">{{ vm.toggle.text }}</a>
+</span>
\ No newline at end of file