In your examples related to material select, when there is no room in the bottom of the page to open the list, the system opens the list in an upwards direction as shown below:
Nevertheless, when used in angular, it seems that this is not the case:
I have closely followed your examples and tried to investigate the behavior as well, but it seems that your examples are not angular, but jquery and demonstrated as angular. I cannot see any "ng-" prefixes in the inspect element of your examples. It seems in your examples, that while the dropdown is opened, a calculation takes place to define the position of the dropdown, which is not the case in my angular project.
Nevertheless, can you please help me on the above?