<div ng-app="myApp" ng-controller="testController">

<script type="text/ng-template" id="component-template.html">
<div style="color:red;" ng-transclude="heading">
</div>
<div style="color:blue;" ng-transclude="body">
</div>
</script>

Example1
<input ng-model="example1Model"/>

<test-component>
    <panel-heading>
      Example2
      <input ng-model="example2Model"/>
    </panel-heading>
    <panel-body>
    Example1Result:{{example1Model}}<br/>
    Example2Result:{{example2Model}}
    </panel-body>
</test-component>
</div>

<script>
angular.module("myApp", [])
.controller("testController", function ($scope, $location) {

})
.component("testComponent", {
    templateUrl: "component-template.html",
    transclude: {
        heading: "panelHeading",
        body: "panelBody"
    },
    controller: function ($scope, $element, $attrs) {        
        this.$doCheck = function () {

           //do anything
        }
    }
});
</script>