diff --git a/README.md b/README.md
index 2c5ebc3..e83d6d2 100644
--- a/README.md
+++ b/README.md
@@ -53,8 +53,9 @@ If you want more customization, you can use the following options:
         icon-leaf     = "icon-file"
         icon-expand   = "icon-plus-sign"
         icon-collapse = "icon-minus-sign"
-        on-select     = "my_tree_handler(branch)"
         on-click      = "my_tree_handler(branch)"
+        on-expand     = "my_tree_handler(branch)"
+        on-collapse   = "my_tree_handler(branch)"
         template-url  = "path/to/treegrid/template.html"
         expand-level  = "2">
     </tree-grid>
@@ -119,17 +120,25 @@ This accepts an array of the same format as col_defs, allowing for sorting & fil
 
 **expand-level:** depth of the tree, you want to expand while loading.
 
-**on-select:** a click handler while you are clicking on +/- icons.
+**on-click:** a click handler while you are clicking on the expanding property, useful when you
+need to redirect if a branch is selected.
 
         $scope.my_tree_handler = function(branch){
-         	console.log('you clicked on', branch)
+            console.log('you clicked on', branch)
         }
 
-**on-click:** a click handler while you are clicking on the expanding property, useful when you
-need to redirect if a branch is selected.
+**on-expand:** a click handler while you are clicking on the icon expand, useful when you 
+need populate the branch when the user expand it.
 
         $scope.my_tree_handler = function(branch){
-            console.log('you clicked on', branch)
+            console.log('you expand', branch)
+        }
+
+**on-collapse:** a click handler while you are clicking on the collapse icon, useful when you 
+need call one action related to parent item.
+
+        $scope.my_tree_handler = function(branch){
+            console.log('you collapse', branch)
         }
 
 ### Specifying the template
diff --git a/src/tree-grid-directive.js b/src/tree-grid-directive.js
index 6db9916..f725961 100644
--- a/src/tree-grid-directive.js
+++ b/src/tree-grid-directive.js
@@ -16,8 +16,7 @@
           "   <tbody>\n" +
           "     <tr ng-repeat=\"row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions track by row.branch.uid\"\n" +
           "       ng-class=\"'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')\" class=\"tree-grid-row\">\n" +
-          "       <td><a ng-click=\"user_clicks_branch(row.branch)\"><i ng-class=\"row.tree_icon\"\n" +
-          "              ng-click=\"row.branch.expanded = !row.branch.expanded\"\n" +
+          "       <td><a ng-click=\"on_user_expandcollapse(row.branch)\"><i ng-class=\"row.tree_icon\"\n" +
           "              class=\"indented tree-icon\"></i>\n" +
           "           </a><span class=\"indented tree-label\" ng-click=\"on_user_click(row.branch)\">\n" +
           "             {{row.branch[expandingProperty.field] || row.branch[expandingProperty]}}</span>\n" +
@@ -74,7 +73,7 @@
                 treegridTemplate) {
 
         return {
-          restrict   : 'E',
+          restrict   : 'EA',
           templateUrl: function (tElement, tAttrs) {
             return tAttrs.templateUrl || treegridTemplate.getPath();
           },
@@ -83,8 +82,9 @@
             treeData        : '=',
             colDefs         : '=',
             expandOn        : '=',
-            onSelect        : '&',
             onClick         : '&',
+            onExpand        : '&',
+            onCollapse      : '&',
             initialSelection: '@',
             treeControl     : '='
           },
@@ -205,30 +205,49 @@
               }
             };
             scope.on_user_click = function (branch) {
+              if (branch !== selected_branch) {
+                select_branch(branch);
+              }
               if (scope.onClick) {
                 scope.onClick({
                   branch: branch
                 });
               }
             };
-            scope.user_clicks_branch = function (branch) {
-              if (branch !== selected_branch) {
-                return select_branch(branch);
+            scope.on_user_expandcollapse = function (branch) {
+              if (branch['children'].length > 0) {
+                if (branch !== selected_branch) {
+                  select_branch(branch);
+                }
+                branch.expanded = !branch.expanded;
+                if (branch.expanded) {
+                  if (scope.onExpand) {
+                    scope.onExpand({
+                      branch: branch
+                    });
+                  }
+                } else {
+                  if (scope.onCollapse) {
+                    scope.onCollapse({
+                      branch: branch
+                    });
+                  }
+                }
               }
             };
             
             /* sorting methods */
             scope.sortBy = function (col) {
-            	if (col.sortDirection === "asc") {
-            	   scope.treeData.sort(sort_by(col.field, true, col.sortingType));
-            	   col.sortDirection = "desc";
-       	           col.sortingIcon = attrs.sortedDesc;
-            	} else {
-            	   scope.treeData.sort(sort_by(col.field, false, col.sortingType));            		
-             	   col.sortDirection = "asc";
-        	       col.sortingIcon = attrs.sortedAsc;	
-            	}
-          	    col.sorted = true;
+                if (col.sortDirection === "asc") {
+                   scope.treeData.sort(sort_by(col.field, true, col.sortingType));
+                   col.sortDirection = "desc";
+                   col.sortingIcon = attrs.sortedDesc;
+                } else {
+                   scope.treeData.sort(sort_by(col.field, false, col.sortingType));                 
+                   col.sortDirection = "asc";
+                   col.sortingIcon = attrs.sortedAsc;   
+                }
+                col.sorted = true;
                 resetSorting(col);              
               };       
 
@@ -241,14 +260,14 @@
             }            
             
             var resetSorting = function(sortedCol) {
-            	var arraySize = scope.colDefinitions.length;
-            	for (var i= 0;i<arraySize;i++) {
-            		var col = scope.colDefinitions[i];
-            		if (col.field != sortedCol.field) {
-            			col.sorted = false;
-                		col.sortDirection = "none";	
-            		}
-            	}
+                var arraySize = scope.colDefinitions.length;
+                for (var i= 0;i<arraySize;i++) {
+                    var col = scope.colDefinitions[i];
+                    if (col.field != sortedCol.field) {
+                        col.sorted = false;
+                        col.sortDirection = "none"; 
+                    }
+                }
             }
               
             /* end of sorting methods */
@@ -650,81 +669,81 @@
     })
   
   .filter('searchFor', function() {
-		return function(arr, filterString, expandingProperty, colDefinitions) {
-			var filtered = [];
-			//only apply filter for strings 3 characters long or more
-		   if (!filterString || filterString.length < 3) {		     
-			   for (var i = 0; i < arr.length; i++) {
-		              var item = arr[i];
-		              if (item.visible) {
-		                 filtered.push(item);
-		           }
-		      }
-		   } else {
-			  var ancestorStack = [];
-			  var currentLevel = 0;
+        return function(arr, filterString, expandingProperty, colDefinitions) {
+            var filtered = [];
+            //only apply filter for strings 3 characters long or more
+           if (!filterString || filterString.length < 3) {           
+               for (var i = 0; i < arr.length; i++) {
+                      var item = arr[i];
+                      if (item.visible) {
+                         filtered.push(item);
+                   }
+              }
+           } else {
+              var ancestorStack = [];
+              var currentLevel = 0;
               for (var i = 0; i < arr.length; i++) {
                  var item = arr[i];
                  while (currentLevel >= item.level) {
-                	 throwAway = ancestorStack.pop();
-                	 currentLevel--;
+                     throwAway = ancestorStack.pop();
+                     currentLevel--;
                  }
                  ancestorStack.push(item);
                  currentLevel = item.level;
                  if (include(item, filterString, expandingProperty, colDefinitions)) {
-                	for(var ancestorIndex = 0; ancestorIndex < ancestorStack.length; ancestorIndex++) {
-                		ancestor = ancestorStack[ancestorIndex];
-                		if(ancestor.visible){
-                			filtered.push(ancestor);
-                		}
-                	} 
+                    for(var ancestorIndex = 0; ancestorIndex < ancestorStack.length; ancestorIndex++) {
+                        ancestor = ancestorStack[ancestorIndex];
+                        if(ancestor.visible){
+                            filtered.push(ancestor);
+                        }
+                    } 
                     ancestorStack = [];
                  }
               }
-		   }
+           }
            return filtered;
-		};
-		
-		function include(item, filterString, expandingProperty, colDefinitions){
-			var includeItem = false;
-			var filterApplied = false;
-			//first check the expandingProperty
-			if (expandingProperty.filterable) {
-				filterApplied = true;
-			    if(checkItem(item, filterString, expandingProperty)) {
-			    	includeItem = true;
-			    }
-			}
-			//then check each of the other columns
-			var arraySize = colDefinitions.length;
-        	for (var i= 0;i<arraySize;i++) {
-        		var col = colDefinitions[i];
-        		if (col.filterable) {
-    				filterApplied = true;
-    			    if(checkItem(item, filterString, col)) {
-    			    	includeItem = true;
-    			    }
-    			}        		
-        	}
-			if (filterApplied) {
-			    return includeItem;
-			} else {
-				return true;
-			}			
-		}
-		
-		function checkItem(item, filterString, col) {
-			if (col.sortingType === "number") {
-				if (item.branch[col.field] != null
-						  && parseFloat(item.branch[col.field]) === parseFloat(filterString)) {
-					return true;
-			    }
-			} else {
-			   if (item.branch[col.field] != null
-				  && item.branch[col.field].toLowerCase().indexOf(filterString.toLowerCase()) !== -1) {
-				   return true;
-			   }
-			}
-		}
+        };
+        
+        function include(item, filterString, expandingProperty, colDefinitions){
+            var includeItem = false;
+            var filterApplied = false;
+            //first check the expandingProperty
+            if (expandingProperty.filterable) {
+                filterApplied = true;
+                if(checkItem(item, filterString, expandingProperty)) {
+                    includeItem = true;
+                }
+            }
+            //then check each of the other columns
+            var arraySize = colDefinitions.length;
+            for (var i= 0;i<arraySize;i++) {
+                var col = colDefinitions[i];
+                if (col.filterable) {
+                    filterApplied = true;
+                    if(checkItem(item, filterString, col)) {
+                        includeItem = true;
+                    }
+                }               
+            }
+            if (filterApplied) {
+                return includeItem;
+            } else {
+                return true;
+            }           
+        }
+        
+        function checkItem(item, filterString, col) {
+            if (col.sortingType === "number") {
+                if (item.branch[col.field] != null
+                          && parseFloat(item.branch[col.field]) === parseFloat(filterString)) {
+                    return true;
+                }
+            } else {
+               if (item.branch[col.field] != null
+                  && item.branch[col.field].toLowerCase().indexOf(filterString.toLowerCase()) !== -1) {
+                   return true;
+               }
+            }
+        }
   });
 }).call(window);
\ No newline at end of file
diff --git a/test/treeGrid.html b/test/treeGrid.html
index cdec455..c3d5d2b 100644
--- a/test/treeGrid.html
+++ b/test/treeGrid.html
@@ -3,7 +3,7 @@
   <head>
     <!-- for local development -->    
     <!-- <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css"> -->
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="../src/treeGrid.css">    
   </head>
   <body ng-controller="treeGridController" style="margin:20px">
@@ -18,22 +18,22 @@ <h4 class=" text-center text-info">trap tree in a grid</h4>
         <button ng-click="showMinDir=true" class="btn btn-primary btn-sm">Use minimum directive</button>
         <br/><br/>
         <div ng-show="!showMinDir">
-            <strong>standard directive: </strong><code>&lt;tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-select="my_tree_handler(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"&gt;&lt;/tree-grid&gt;</code>
+            <strong>standard directive: </strong><br><code>&lt;tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-click="my_tree_handler_click(branch)" <br> on-expand="my_tree_handler_expand(branch)" on-collapse="my_tree_handler_collapse(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"&gt;&lt;/tree-grid&gt;</code>
             <br/>
             <br/>
             <button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
             <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>
             <input class="input-sm pull-right" type="text" data-ng-model="filterString"	placeholder="Filter" />
-            <tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-select="my_tree_handler(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"></tree-grid>
+            <tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-click="my_tree_handler_click(branch)" on-expand="my_tree_handler_expand(branch)" on-collapse="my_tree_handler_collapse(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"></tree-grid>
         </div>
         <div ng-show="showMinDir">
-            <strong>bare minimum directive:</strong> <code>&lt;tree-grid tree-data="tree_data"&gt;&lt;/tree-grid&gt;</code>
+            <strong>bare minimum directive:</strong><br><code>&lt;tree-grid tree-data="tree_data"&gt;&lt;/tree-grid&gt;</code>
             <br/>
             <br/>
             <tree-grid tree-data="tree_data"></tree-grid>
         </div>
     </div>
-    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
     <!-- for local development -->
     <!--
         <script src="../lib/angular/angular.min.js"></script>
diff --git a/test/treeGridTest.js b/test/treeGridTest.js
index df3f152..806fa35 100644
--- a/test/treeGridTest.js
+++ b/test/treeGridTest.js
@@ -188,9 +188,15 @@
                 displayName: "Time Zone"
             }
         ];
-        $scope.my_tree_handler = function (branch) {
+        $scope.my_tree_handler_click = function (branch) {
             console.log('you clicked on', branch)
         }
+        $scope.my_tree_handler_expand = function (branch) {
+            console.log('you expand', branch)
+        }
+        $scope.my_tree_handler_collapse = function (branch) {
+            console.log('you collapse', branch)
+        }
 
         function getTree(data, primaryIdName, parentIdName) {
             if (!data || data.length == 0 || !primaryIdName || !parentIdName)