Question

Demo: http://jsfiddle.net/sunnycpp/MPACc/4/

Same code copy-pasted here:
HTML

<div class="container">
  <debug-bar ng-controller="parentController">
    <debug-bar ng-controller="childController">
      <debug-bar ng-controller="oneMoreChildController"></debug-bar>
    </debug-bar>
    <debug-bar ng-controller="oneMoreChildController"></debug-bar>
  </debug-bar>
</div>

Javascript

var angModule = angular.module('components', []);
angModule.directive('debugBar', function () {
  return {
    restrict: 'E',
    template: 
    '<div>'+
        '<form class="form-inline">' +
            '<input type="text" class="input-small" ng-model="myText"/>' +
            '<button class="btn btn-primary">Broadcast</button>' +
            '<button class="btn btn-primary">Emit</button>' +
        '</form>' +
        '<div ng-transclude></div>'+
    '</div>',
    transclude: true,
    replace: true
  };
});


function createController(myText) {
  return function ($scope) {
    $scope.myText = myText;
    $scope.$on("event", function (senderText) {
      console.log("Event received in:" + $scope.myText + " from Sender:" + senderText);
    });
    $scope.$broadCastEvent = function () {
      $scope.$broadcast("event", $scope.myText);
      console.log("Sent event from:" + $scope.myText);
    };
  };
}

angModule.controller("parentController", createController("In parent"));

angModule.controller("childController", createController("in FirstChild"));

angModule.controller("oneMoreChildController", createController("in oneMoreChildController"));
angModule.controller("oneMoreChildController", createController("in secondLevelChild"));

Answer 1

Because you didn’t define any. :p jsfiddle and bootstrap reset the margins and you don’t define any…

Defining some margins fixes the problems immediately

input,button{
 margin:0 5px;
}

Example