JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="chemistryApp">
		<h1>Chemistry Controller</h1>
	    
		<div class="container" id="ngChem1" ng-controller="chemistryController" >
			<ul>
			    
				<li data-ng-repeat="element in periodic.elements">{{element.name}}</li>
			
			</ul>
		</div>
	</body>

JavaScript

'use strict';
var chemistryApp = angular.module('chemistryApp', []);

chemistryApp.controller(
      'chemistryController',
	function chemistryController($scope) {
		$scope.periodic = {elements: [
			{
				"atomicNumber": 1,
				"name": "Hydrogen",
				"atomicWeight": 1.00794,
				"phase": "Gas",
				"ionization": 13.5984,
				"melting": -259.15,
				"boiling": -252.87
			},
			{
				"atomicNumber": 2,
				"name": "Helium",
				"atomicWeight": 4.002602,
				"phase": "Gas",
				"ionization": 24.5874,
				"melting": 0,
				"boiling": -268.93
			},
			{
				"atomicNumber": 3,
				"name": "Lithium",
				"atomicWeight": 6.941,
				"phase": "Solid",
				"ionization": 5.3917,
				"melting": 180.54,
				"boiling": 1342
			}
		]
	   };
	});