Making an angular statusbar directive

im looking to implement a directive to display status messages in my ionic angular app.. the idea is that i define a bunch of standard status messages in my template as follows and it's inspired by the stock ng-switch directive..

<status-bar code="statusCode" onShow="onStatusShow" onHide="onStatusHide">
    <status-message when-code="OK" style="calm" timeout="3000">My HTML message</status-message>
    ...
    ...
    <status-message when-complex style-field="style" text-field="text" timeout-field="timeout" />
</status-bar>

my requirements are these:

status-bar

1. the directive should bind to $scope.statusCode and depending upon its string value, it should activate one of the sub-directives except the when-complex one..
2. however, if i assign an object to $scope.statusCode, it should activate the when-complex directive if defined..
3. the directive also exposes an onShow and onHide callbacks..
4. when changing the value of $scope.statusCode, the previously active sub-directive should be completely hidden before showing the newly active one.. (animations)

status-message

1. style and timeout attributes are optional and will default to 'stable' and null respectively..
2. the timeout attribute will cause this sub-directive to show for a short time before clearing $scope.statusCode..

whereas i can write very simple directives, this one is proving to be a bit beyond me.. ive seen the source of ng-switch and its confusing.. i have tried myself as well but i havent gotten really far with this no matter how much ive tried.. im not posting my code approaches here not for the lack of trying but for the sake of cluttering and relevance..

so i was wondering if maybe someone could come up with a possible basic approach on codepen or plunkr that i can use as a base for expanding upon (since this is just a simplified explanation of what i intend to do with this directive).. or atleast point in the directions i need to go in..