Как создать разборный элемент в абсолютном положении, используя угловой материал

Вам нужно будет использовать CSS - CodePen

наценка

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill>
  <div id="chatWindow" layout="column" style="height:{{status==='Open'?'50px':'200px'}}">
    <md-button ng-click="toggle()">{{status}}</md-button>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.status = "Open";
  $scope.toggle = function () {
    $scope.status = ($scope.status === "Open") ? "Close" : "Open";
  }
});

CSS

body {
  background: purple;
}

#chatWindow {
  display: block;
  width: 300px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: yellow;
}

Да, это выполнимо. Существует репозиторий github, если вы хотите создать окно чата, как вы говорите.

https://github.com/irontec/angular-bootstrap-simple-chat

Но если вы хотите настроить себя, то вот код для collapsable div. Удачи.

http://jsfiddle.net/hungerpain/eK8X5/7/