ng-if inside of md-menu not opening properly - angularjs

Question

I have an ng-if inside of an <md-menu> tag that toggles more info when the user clicks on the item in the menu. However, when I click on the menu item, the menu closes. When I reopen it, the DOM displays that the extra info is showing but it is not actually being displayed in the menu and the menu has not resized to fit what should be there.
Here is my menu code:
<md-menu>
<md-button aria-label="Open Notifications Menu" ng-click="$mdOpenMenu($event)">
<md-icon md-svg-icon="bell"></md-icon>
</md-button>
<md-menu-content width="5">
<md-menu-item ng-repeat="notification in vm.notificationList">
<div aria-label="Notification" ng-click="vm.showDetails(notification)" md-prevent-menu-close="md-prevent-menu-close">
<div layout="column">
<div flex layout="row" layout-align="start center">
<span flex><b>{{notification.title}}</b></span>
<span style="opacity: 0.5">{{vm.getTime(notification)}}</span>
</div>
<div ng-show="notification.showDetails">
<span style="opacity: 0.7">{{notification.details}}</span>
</div>
</div>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
Here is the function for the ng-click in typescript:
showDetails(message: any): void {
message.showDetails = !message.showDetails;
}
EDIT
I fixed the problem with the menu closing using md-prevent-menu-close... duh. I've updated the html. The problem is still the same though, the menu does not change size to display the new data.
EDIT
I fixed the problem with the content not showing by removing the md-button and replacing it with a div. I updated the html accordingly. The only problem now is that the menu will not adjust its height to fit the new content neatly.

Answer 1

Is this the kind of thing that you want? - CodePen
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
<md-menu>
<md-button aria-label="Open Notifications Menu" ng-click="$mdOpenMenu($event)">
Bell
</md-button>
<md-menu-content width="5">
<md-menu-item ng-repeat="notification in vm.notificationList" ng-click="vm.showDetails($index)" md-prevent-menu-close="md-prevent-menu-close" aria-label="Notification">
<div layout="column" flex>
<div flex layout="row" layout-align="start center">
<span flex><b>{{notification.title}}</b></span>
<span style="opacity: 0.5">22-08-2016 09:06</span>
</div>
<div ng-if="notification.showDetails">
<span style="opacity: 0.7">{{notification.details}}</span>
</div>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function() {
var vm = this;
vm.notificationList = [
{title: "Read", details: "Enjoy the book", showDetails: false},
{title: "Eat", details: "You're hungry", showDetails: false},
{title: "Dring", details: "Have a pint of lager", showDetails: false}
]
vm.showDetails = function (index) {
vm.notificationList[index].showDetails = !vm.notificationList[index].showDetails;
}
});

Answer 2

Use ng-show not ng-if. ng-if removes elements from the DOM permanently if some condition is no satisfied. ng-show just toggles between whether or not an element is hidden.