Here is a snippet of my Angular materials test code:
<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
<md-radio-group ng-model="data.group1">
<md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
<md-radio-button value="Banana"> Banana </md-radio-button>
<md-radio-button value="Mango">Mango</md-radio-button>
</md-radio-group>
<hr>
<p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
<md-radio-group ng-model="data.group2" class="md-primary">
<md-radio-button ng-repeat="d in radioData" ng-value="d.value" ng-disabled=" d.isDisabled " ng-class="{'md-align-top-left': $index==1}">
{{ d.label }}<br>
<span class="ipsum" ng-if="$index == 1">
Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
sit amet dapibus tortor ligula non nibh.
</span>
</md-radio-button>
</md-radio-group>
<p>
<md-button class="md-raised" ng-click="addItem()" type="button">Add</md-button>
<md-button class="md-raised" ng-click="removeItem()" type="button">Remove</md-button>
</p>
<hr>
<p style="margin-bottom: 0;">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
<p style="margin-top: 0;">Selected Avatar: <span class="radioValue">{{ data.group3 }}</span></p>
<md-radio-group ng-model="data.group3">
<md-radio-button ng-repeat="it in avatarData" ng-value="it.value" aria-label="{{it.title}}">
<md-icon md-svg-icon="{{it.id}}"></md-icon>
</md-radio-button>
</md-radio-group>
</form>
</div>
Visit this link for more details
While this code runs smoothly on CodePen, I encounter errors when attempting to run it locally.
I have tried installing Angular and linking JS/CSS from CDN but without success. Can anyone offer assistance?