При нажатии на тег <pre> добавить элемент в массив и вывести его
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Tony's Pizza</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="menuController">
<div class="container">
<h1>Tony's Pizza</h1>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Cheese Pizza',11.99)"/> Cheese Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Pepperoni Pizza',15.55)"/> Pepperoni Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Margherita Pizza',11.22)"/> Margherita Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('BBQ Chicken Pizza',12.55)"/> BBQ Chicken Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Combo Pizza',12.55)"/> Combo Pizza</label>
</div>
<div>
<h3>Selected Item</h3>
<span ng-click="addTopping()"><pre>{{model.mainDish.name}} {{model.mainDish.price}}</pre></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller("menuController", [
"$scope",
function($scope) {
$scope.model = { title: "" };
$scope.changeMainDish = function(name, price) {
$scope.model.mainDish = { name: name, price: price };
};
}
]);
</script>
</body>
</html>
